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. 运行python文件报SyntaxError：Non-ASCII character '\xe7'

    以下是报错内容: 在文件页头加上: #coding=uft-8 ~解决了~ 记录一下(捂脸)

  2. zabbix web端有数据但是没有图形

    zabbix web端有数据但是没有图形 我遇到的情况是,在配置 zabbix 网站目录时,修改了zabbix 目录的所有者和所属组,以使得 zabbix/conf/zabbix.conf.php 文 ...

  3. java中空字符串、null的区别

    String 的null,或者赋值为"",有什么区别? 废话少说,上代码: public class EmptyAndNull { /** * @param args */ pub ...

  4. 使用mongoDB时错误解决

    接触mongodb遇到的错误,记录下来,后续遇到问题,会持续更新 为了让mongodb更直观,在windows使用了NoSQL Manager for MongoDB作为连接工具 1.在连接数据库时遇 ...

  5. CAD出现向程序发送命令时出现问题提示解决方法分享

    大家有没有遇到在使用cad打开图纸的时候提示向程序发送命令时出现错误的情况呢,如果你在使用cad的时候出现了这个提示,是由于软件的兼容性出现了问题,那么该怎么办呢,下面小编就给大家带来cad打开图纸提 ...

  6. 笨办法学Python（二十二）

    习题 22: 到现在你学到了哪些东西? 这节以及下一节的习题中不会有任何代码,所以也不会有习题答案或者加分习题.其实这节习题可以说是一个巨型的加分习题.我将让你完成一个表格,让你回顾你到现在学到的所有 ...

  7. meta详解(常用)

    1.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 说明:设置浏览器的兼容模式版本.表示 ...

  8. JSON：使用json_encode函数解析结果为Null

    1.首先,数据库中的json数据是这样的 2.仓鼠使用json_encode()函数进行解析json数据时,显示了一个NULL: 3.这时候,我们需要使用,表示在解析json之前,该json是有语法错 ...

  9. 第二章 LCD液晶显示屏&声控装置&播放音乐&遥控器

    这节我将带大家了解亮宁机器人编程的基础部分. LCD液晶显示屏 LCD液晶显示屏是在实现某种功能和调试中不可缺少的部分,接下来我带大家学习,如何使用LCD液晶显示屏. 首先我们把LCD液晶显示屏插入主 ...

  10. *15. 3Sum (three pointers to two pointers), hashset

    Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Find ...