风清扬

导航

H5-JavaScript（四） 动态创建HTML 标签

一、老方法

1、document.write("<p>新添加的标签</p>")

2、标签.innerHTML = "<p>新添加的标签</p>"

 

问题： 没有结构化思想。

　　　1、p标签建立起来了返回什么东西？ 想使用是不是需要重新document.getElementByTagName？

　　　2、元素、文本、属性 都搅在一起

二、DOM 方法

1、创建元素节点

　　var para = document.createElement("p");

2、创建文本节点

　　var  text = document.createTextNode("Hello,World");

3、节点之间相互挂钩

　　para.appendChild(text);

举例说明：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>动态创建节点-DOM</title>
 6 </head>
 7 <body>
 8 <!--     div 标签下创建一段话：<p>This is <em>my</em> content.</p> -->
 9     <div id="testdiv"></div>
10     <script>
11         window.onload = function() {
12             var div = document.getElementById("testdiv");
13             var para = document.createElement("p");
14             var txt1 = document.createTextNode("This is ");
15             para.appendChild(txt1);
16             var em = document.createElement("em");
17             var txt2 = document.createTextNode("my");
18             em.appendChild(txt2);
19             para.appendChild(em);
20             var txt3 = document.createTextNode(" content.");
21             para.appendChild(txt3);
22             div.appendChild(para);
23         }
24     </script>
25 </body>
26 </html>

 三、图片库第三版

1、Html 内容：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js 图片库 修正版3nd</title>
 6     <!-- 这里主要修正内容为： placeholder，description都是依赖imagegallery存在的，所以应该在
 7          showPic里边动态创建，而不是静态写死 -->
 8     <link rel="stylesheet" href="css/layout.css" />
 9 </head>
10 <body>
11     <h1>Snapshots</h1>
12     <ul id="imagegallery">
13         <li>
14             <a href="img/firefox.jpg" title="A firefox display" >FireFox</a>
15         </li>
16         <li>
17             <a href="img/coffee.jpg" title="a cup of black coffee" >Coffee</a>
18         </li>
19         <li>
20             <a href="img/rose.jpg" title="A red,red rose" >Rose</a>
21         </li>
22         <li>
23             <a href="img/bigben.jpg" title="The Famous clock" >Bigben</a>
24         </li>
25     </ul>
26     <script type="text/javascript" src="js/showPic.js"></script>
27 </body>
28 </html>

 

2、Javascript 内容：

// 加载到window.onload 中的通用函数
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func();
    } else {
        window.onload = function() {
            oldonload();
            func();
        };
    }
}
// newElement 插入到targetElement 元素之后
function insertAfter(newElement, targetElment) {
    var parent = targetElment.parentNode;
    if (parent.lastChilde == targetElment) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElment.nextSibling);
    }
}
// placeholder，description标签创建
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", "img/placeholder.jpg");
    placeholder.setAttribute("alt", "my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id", "description");

    var descText = document.createTextNode("Choose a image");
    description.appendChild(descText);
    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder, gallery);
    insertAfter(description, placeholder);
    alert("success");
}
// 所有a标签与showPic 挂钩
function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) 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);
        }
    }
}
//
function showPic(whichPic) {
    if (!document.getElementById("placeholder")) return false;
    var source = whichPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    if (document.getElementById("description")) {
        var title = whichPic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = title;
    }
    return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

 

posted on 2017-09-24 10:49  卜戈的博客  阅读(860)  评论(0)    收藏  举报