Alter the structure of web pages with JavaScript

Most of the DOM methods you've seen so far are useful for identifying elements.

Both getElementById and getElementByTagName allow you to quickly and easily

target specific element nodes in a document.

These elements can then be manipulated using methods and properties like

setAttribute or nodeValue. Thats how the image gallery works.

As you can see, This is the way that the majority of JavaScript work. The structure of the web

page is created with markup. JavaScript is then used to change some of the details without

altering the underlying structure.

But it is also possible to use JavaScript to change the structure and contents of a web page.

There are some DOM methods that can alter the structure of a web page by creating new elements

and modifying existing ones.

A briefly review a couple techniques that developers have used in the past :

document.write && innerHTML

document.write :

The major drawback to using document.write is that it goes against the principle of unobtrusive JavaScript

innerHTML

The innerHTML property can be quite useful when you want a quick and easy way to insert a chunk of HTML into a

document. Unfortunately, innerHTML doesnt return any references to the content you insert .

DOM methods

According to the DOM, a document is a tree of nodes. If you want to add to this tree, you need to insert new nodes.

If you want to add markup to a document, you need to insert element nodes.

createElement :

document.createElement( nodeName )

eg : var para = document.createElement( "p" );

appendChild :

The simplest way to insert a newly created node into the node tree of a document is to make it a child of an existing

node in the document .

parent.appendChild( child ) ;

eg : var para = document.createElement("p");

var testdiv = document.getElementById("testdiv");

testdiv.appendChild( para ) ;

createTextNode :

The node you have created is an empty paragraph element.

If you want to put some text into that paragraph, you need to create a text node

document.createTextNode( text );

eg : var para = document.createElement("p");

var txt = document.createTextNode("Hello world");

para.appendChild( txt );

var testdiv = document.getElementById("testdiv");

testdiv.appendChild( para );

Inserting a new element before an existing one :

There is a DOM method called insertBefore. you can use it to insert a new element before an existing element.

Here's the syntax :

parentElement.insertBefore ( newElement, targetElement )

eg : var gellery = document.getElementById("imageallery") ;

gallery.parentNode.insertBefore(placeholder, gallery) ;

Inserting a new element after an existing one :

eg :

function insertAfter( newElement, targetElement ) {
        var parent = targetElement.parentNode ; 
        if( parent.lastChild == targetElement ) {
                parent.appendChild( newElement );
        } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
        }
}

The next node after the target element is the nextSibling property of the target element.

You can use this script code in the furture as the expandtion.

Then follows the finished image gallery :

/***　　　　　　index.html 　　　　　　***/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="styles/layout.css" media="screen">
</head>
<body>

    <h1>Snapshiots</h1>
    <ul id="imagegallery">
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display">
                <img src="images/thumbnail_fireworks.jpg" alt="Fireworks">
            </a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffe">
                <img src="images/thumbnail_coffee.jpg" alt="Coffee">
            </a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red, red rose">
                <img src="images/thumbnail_rose.jpg" alt="Rose">
            </a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock">
                <img src="images/thumbnail_bigben.jpg" alt="Big Ben">
            </a>
        </li>
    </ul>

    <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

View Code

/***　　　　　　showPic.js　　　　　　***/

/**
 * Created by Administrator on 9/9/2015.
 */

/*
 you can use this function to count how many children nodes the body element contains
 */
function countBodyChildren() {
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.nodeType);
    alert( body_element.childNodes.length );
}

function addLoadEvent(func) {
    var oldonload = window.onload;
    if( typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

function preparePlaceholder() {
    if( !document.createElement )return false;
    if( !document.createTextNode ) return false;
    if( !document.getElementById ) return false;
    if( !document.getElementById("imagegallery")) return false;

    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", "images/placeholder.gif");
    placeholder.setAttribute("alt", "my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id", "description");
    var desctext = document.createTextNode("Choose an image");
    description.appendChild(desctext);

    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder, gallery);
    insertAfter(description, placeholder);
}


function prepareGallery() {
    if( !document.getElementsByTagName )  return false;
    if( !document.getElementById ) return false;
    if( !document.getElementById("imagegallery") ) return false;

    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for(var i=0; i<links.length; i++) {
        links[i].onclick = function() {
            return showPic(this) ? false : true;
        }
    }
}


function showPic(whicPic) {
    if( !document.getElementsByTagName ) return false;
    if( !document.getElementById("placeholder") ) return false;

    var source = whicPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);

    if(document.getElementById("description")) {
        var text = whicPic.getAttribute("title") ? whicPic.getAttribute("title") : 3;
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
    }
    return true;
}

addLoadEvent( preparePlaceholder );
addLoadEvent( prepareGallery );

View Code

/***　　　　　　layout.css　　　　　　***/

body{
    font-family: "Helvetica", "Arial", serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    /*background-color: #777;*/
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

img {
    display: block;
    clear: both;
}

View Code