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. 转：Oracle优化总结

    本文主要从大型数据库ORACLE环境四个不同级别的调整分析入手,分析ORACLE的系统结构和工作机理,从九个不同方面较全面地总结了 ORACLE数据库的优化调整方案. 关键词 ORACLE数据库 环境 ...

  2. Android基础Activity篇——Toast

    1.Toast Toast在英文中有烤面包的意思,而在安卓开发中是用来提醒用户的消息显示.我猜这里之所以用Toast为该功能命名可能是因为消息的弹出方式就像面包烤好了从面包机中弹出来一样. 2.使用T ...

  3. 如何让MVC和多层架构和谐并存(二）

    上一节说了一些笼统的东西,这节说一些实际的操作. 1.取列表.这是一个新闻列表:         对应MVC的model是: public class NewsListModel { /// < ...

  4. Servlet是线程安全的吗？

    Servlet不是线程安全的. 要解释为什么Servlet为什么不是线程安全的,需要了解Servlet容器(即Tomcat)使如何响应HTTP请求的. 当Tomcat接收到Client的HTTP请求时 ...

  5. jQuery + Stimulsoft.Report 选择gridview多行打印

    jQuery + Stimulsoft.Report 报表空间打印多个ID split函数,多行ID 1. 获取选择多行ID(前台) //按钮-打印 function PrinterWorkQuali ...

  6. 关于Java虚拟机内存原型的基本知识

    Java虚拟机内存原型的六个部分: 1.寄存器:我们在程序中无法控制 2.栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 3.堆:存放用new产生的数据 4.静态域:存放在 ...

  7. Convolutional Neural Networks from deep learning (assignment 1 from week 1)

    Convolutional Neural Networks https://www.coursera.org/learn/convolutional-neural-networks/home/welc ...

  8. ipython notebook超级好用

    这个东西超级好用,以后要以c++和python为主要沟通语言了.

  9. C#如何使用异步编程【BeginInvoke/EndInvoke】

    怎么使用异步,就是用委托进行处理,如果委托对象在调用列表中只有一个方法,它就可以异步执行这个方法.委托类有两个方法,叫做BeginInvoke和EndInvoke,它们是用来异步执行使用. 异步有三种 ...

  10. Q&A - Nginx与Tomcat的区别？

    web上的server都叫web server,但是大家分工也有不同的. nginx常用做静态内容服务和代理服务器(不是你FQ那个代理),直面外来请求转发给后面的应用服务(tomcat,django什 ...