第七章 动态创建HTML内容

javascript也可以改变网页的结构和内容

• document.write()方法

可以方便快捷地把字符串插入到文档里

document.write("<strong>hello world.</strong>");

/*
function insertP(text){
    var str = "<p>";
    str += text;
    str +="</p>";
    document.write(str);
}
insertP("hello world!");

*/

• innerHTML属性

该属性可以用来读、写某给定元素里的HTML内容。

<div id="test">
    
</div>
<script type="text/javascript">
    window.onload = function(){
        var testdiv = document.getElementById("test");
        testdiv.innerHTML ="<p>这是一句话</p>"
    }
</script>

• createElement()方法

创建一个元素节点。这个方法本身并无实际用处，需要把新创建出来的元素插入文档才能达到实际目的。

document.creatElement(node.name)

 

• appendChild()方法

让新创建的节点成为文档某个现有节点的一个子节点。

parent.appendChild(child)

var test = document.getElementById("test");
var para = document.createElement("p");
test.appendChild(para);            
//document.getElementById("test").appendChild(document.createElement("p"));

 

• creatTextNode()方法

创建一个文本节点。语法：document.creatTextNode(text)

var test = document.getElementById("test");
var txt = document.createTextNode("hello world");
test.appendChild(text);

• insertBefore()方法

这个方法将把一个新 元素插入到一个现有元素的前面。想调用此方法，必须知道三件事：

-想插入的新元素

-想把新元素插入到哪个现有元素的前面

-这两个元素共同的父元素

parentElement.insertBefore(newElement,targetElent)

 比如，把description插入到图片列表imagegallery的前面。

var gallery = document.getElementById("imagegallery");
      gallery.parentNode.insertBefor(description,gallery);

 

• 编写insertAfter()函数

/* 编写insertAfter函数 */
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefor(newElement,targetElement.nextSibling);
    }
}