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. 《ArcGIS Runtime SDK for Android开发笔记》——（2）、Android Studio基本配置与使用

    1.前言 在上一篇文章<Android Studio下载与安装>里我们已经介绍了Android Studio的下载与安装步骤,这一篇我们将针对Android Studio的基本常见使用做一 ...

  2. instanceof和相关函数

    instanceof:如果左边对象是右边类型所表示类(或任意一子类)的一个实例,则返回true,否则false.判断左边真实类型是不是右边的类或它的派生类. //实例一 Object o= new L ...

  3. Spring+SpringMVC+Mybatis+Shiro环境搭建之IDEA下搭建Maven项目

    运行IntelliJ IDEA 2016.3.2(64)编译器新建项目   在弹出的窗体中选择maven,然后勾选要建的maven模板--这里选webApp 然后填入相应的maven项目组信息(Gro ...

  4. WebRTC协议

    webrtc协议介绍 MDN webrtc协议 ICE 交互式连接建立Interactive Connectivity Establishment (ICE) 是一个允许你的浏览器和对端浏览器建立连接 ...

  5. 如何下载YouTube 8K视频

    随着科技的进步,人们对高清视频的要求越来越高,因此视频的分辨率也越来越高.从最开始的720P,到1080P,再到2K,进而到如今4K,不断地满足人们挑剔的胃口.4K分辨率的视频已经逐渐进入人们的生活中 ...

  6. SAP CRM WebClient UI和Hybris backoffice UI开发的相同点

    CRM WebClient和Hybris backoffice的UI开发都不需要开发人员手写原生的html代码. CRM WebClient UI 在CRM WebUI workbench里,开发人员 ...

  7. 【BZOJ3622】已经没有什么好害怕的了（动态规划+广义容斥）

    点此看题面 大致题意: 有\(n\)个糖果和\(n\)个药片,各有自己的能量.将其两两配对,求糖果比药片能量大的组数恰好比药片比糖果能量大的组数多\(k\)组的方案数. 什么是广义容斥(二项式反演) ...

  8. 背包问题模板，POJ(1014)

    题目链接:http://poj.org/problem?id=1014 背包问题太经典了,之前的一篇博客已经讲了背包问题的原理. 这一个题目是多重背包,但是之前的枚举是超时的,这里采用二进制优化. 这 ...

  9. Laravel5 构造器高级查询条件写法

    <?php #DB 高级查询 // select * from table where A and B or C $all_data = DB::table("shopnc_goods ...

  10. jQuery UI datepicker z-index默认为1 怎么处理

    最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...