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="data:images/thumbnail_fireworks.jpg" alt="Fireworks">

            </a>

        </li>

        <li>

            <a href="images/coffee.jpg" title="A cup of black coffe">

                <img src="data:images/thumbnail_coffee.jpg" alt="Coffee">

            </a>

        </li>

        <li>

            <a href="images/rose.jpg" title="A red, red rose">

                <img src="data:images/thumbnail_rose.jpg" alt="Rose">

            </a>

        </li>

        <li>

            <a href="images/bigben.jpg" title="The famous clock">

                <img src="data:images/thumbnail_bigben.jpg" alt="Big Ben">

            </a>

        </li>

    </ul>

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

</body>

</html>

/***　　　　　　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 );

/***　　　　　　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;

}
 
 

Alter the structure of web pages with JavaScript的更多相关文章

  1. Displaying Data in a Chart with ASP.NET Web Pages (Razor)

    This article explains how to use a chart to display data in an ASP.NET Web Pages (Razor) website by ...

  2. 15款加速 Web 开发的 JavaScript 框架

    JavaScript 可以通过多种方式来创建交互式的网站和 Web 应用程序.利用 JavaScript,可以让你移动 HTML 元素,创建各种各样的自定义动画,给你的访问者更好的终端用户体验. 对于 ...

  3. Web Pages razor 学习

    1. Web Pages razor Web Pages 是三种 ASP.NET 编程模型中的一种,用于创建 ASP.NET 网站和 web 应用程序. 其他两种编程模型是 Web Forms 和 M ...

  4. ASP.NET Web Pages：简介

    ylbtech-.Net-ASP.NET Web Pages:简介 ASP.NET 是一个使用 HTML.CSS.JavaScript 和服务器脚本创建网页和网站的开发框架. ASP.NET 支持三种 ...

  5. Transferring Data Between ASP.NET Web Pages

    14 July 2012 20:24 http://www.mikesdotnetting.com/article/192/transferring-data-between-asp-net-web- ...

  6. Web Pages

    什么是Web Pages 1.WebPages是三种创建ASP.NET网站或Web应用程序模式中的一种 2.而其两种编程模式是MVC(Model-View-Controller,模型-视图-控制器)和 ...

  7. Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites

    Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites By Tom FitzMacken|February 17, 20 ...

  8. ASP.NET Web Pages (Razor) FAQ

    ASP.NET Web Pages (Razor) FAQ By Tom FitzMacken|February 7, 2014 Print   This article lists some fre ...

  9. 转：Generating PDFs from Web Pages on the Fly with jsPDF

    The Portable Document Format has been one the major innovations in the fields of desktop publishing ...

随机推荐

  1. ECMAScript Regex

    Everything has its own regulation by defining its grammar. ECMAScript regular expressions pattern sy ...

  2. appium（二）简单的demo

     转自http://blog.csdn.net/Yejianyun1/article/details/55517418     启动appium服务,连接手机,将测试用例demo存放到.py文件中 # ...

  3. SQLServer 2012 Ent 安装失败，另辟蹊径

    今天配到SqlServer2012 安装不了问题,总是NetFX3,然后一次挂了,然后VS2010 Shell也是个悲剧. 装了VS2010,可以了吧,总不能在不给力吧.但是有提示VS2010是打上s ...

  4. java集合框架——Set

    一.Set概述 Set集合的特点是元素不允许重复,而且是无序的(添加和取出的顺序不一致). Set接口中的方法和Collection接口中的方法几乎相同,略. Set接口下常用的两个类:HashSet ...

  5. 将TIMESTAMP类型的差值转化为秒的方法

    两个TIMESTAMP之差得到的是INTERVAL类型,而有时我们只需要得到两个时间相差的秒数,如果变成INTERVAL之后,想要获取这个值会非常麻烦. 比较常见的方法是使用EXTRACT来抽取获得的 ...

  6. libtool: Version mismatch error. 解决方法

    在编译一个软件的时候,在 ./configure 和 make  之后可能会出现如下错误: libtool: Version mismatch error.  This is libtool 2.4. ...

  7. Node.js 的初体验

    例子1: 1.首先第一步 :要 下载 node.js. 官网 上可以下载 下载完后,是这个玩意. 2. 打开 node.js ,然后输入 // 引入http模块 var http = require( ...

  8. linux df -h显示空间信息不正确

    在linux系统上有时发现使用df 查看磁盘已使用空间和使用du统计的不相等,例如: [running]root@slave11:/$ df -h Filesystem            Size ...

  9. NodeJS中常见异步接口定义（get、post、jsonp）

    越来越多的人在使用nodeJS,作为一门服务端语言,我们不可避免的要写异步接口(ajax和jsonp).再次强调ajax和jsonp是两个概念,但是由于jquery的封装,使这两种异步接口的调用方式, ...

  10. Extjs4.2 tabPosition left 相关

    解决tabPosition:left 标签的方向问题   <%@ page language="java" import="java.util.*" pa ...