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. 责任链模式(ChainOfResponsibiliby、Filter)

    Request 类: package com.demo; public class Request { private String requestStr; public String getRequ ...

  2. “System.OutOfMemoryException”类型的未经处理的异常在 mscorlib.dll 中发生

    在VS中写程序遇到这样的问题.但数据规模小的时候不出现,但数据规模大的时候就出现.但我的电脑用32G内存.处理的文本也不是很多,在文本alignment时出错.

  3. IDEA下通过Git实现代码管理

    IDEA下通过Git实现代码管理 1.介绍 1.1 Git概述 Git是类似于SVN等代码管理软件,使用分布式技术实现.Github是互联网代码仓库,每个人可以在上面创建自己的仓库,使用git完成同g ...

  4. oracle11g在CentOS6.9上启动脚本

    #!/bin/bash# chkconfig:2345 99 10# description: Startup Script for oracle Database# /etc/init.d/orac ...

  5. Altium_Designer-怎么将“原理图的更改”更新到“pcb图”？

    打开原理图,直击菜单栏>>Design,选择第一项,>>Update PCB Document...在弹出的对话框里面选择执行更改即可将原理图更新到工程下面对应的PCB.也可以 ...

  6. centos 7 iptables基本配置

    安装iptable iptable-service #先检查是否安装了iptables service iptables status #安装iptables yum install -y iptab ...

  7. DP上课覆盖知识点，POJ(1513)

    题目链接:http://poj.org/problem?id=1513 解题报告: 思路: 知识点从第二个开始扫,递推表达式是:minlec[i]=min(minlec[k])+1,并且要保证,tim ...

  8. http长链接

    之前说过http的请求是再tcp连接上面进行发送的,那么tcp连接就分为长连接 和 短连接这样的概念,那么什么是长链接呢?http请求发送的时候要先去创建一个tcp的连接,然后在tcp的连接上面发送h ...

  9. DOM(四)：h5扩展方法

    getElementByClassName()方法getElementByClassName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList //取得所 ...

  10. 学习MyBatis之简单入门HelloWorld

    转:https://blog.csdn.net/gaomb_1990/article/details/78299784 一.准备 Eclipse:Luna Service Release 1 (4.4 ...