首页 > 代码库 > 《DOM Scripting》学习笔记-——第七章 动态创建html内容

《DOM Scripting》学习笔记-——第七章 动态创建html内容

本章内容

1、动态创建html内容的“老”技巧:document.write()innerHTML属性

2DOM方法:createElement(),creatTextNode(),appendChild(),insertBefore().

document.write()

语法:document.write(“ ”)

        document.write(变量)

缺点违背了“分离js”原则。即使把document.write语句挪到外部函数里还是需要在html文档的<body>部分使用<script>标签才能调用那个函数。

二、innerHTML属性

 技术分享

技术分享

 innerHTML属性没有细节可言,要想获得细节,就必须使用DOM方法和属性。

三、DOM提供的方法

1、createElement()方法

语法:document.createElement(nodeName)

举例:document.createElement("p");

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

window.onload = function() {
var para = document.createElement("p");
var info = "nodeName: ";
info+= para.nodeName;
info+= " nodeType: ";
info+= para.nodeType;
alert(info);
}

 技术分享

 

2appendChild()方法

语法:parent.appendChildchild

举例:var testdiv = document.getElementById("testdiv");

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

        testdiv.appendChild(para);

3、createTextNode()方法

语法:document.creatTextNode(text)

举例:var txt = document.createTextNode("Hello world");

para.appendChild(txt);

 

window.onload = function() {

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

var testdiv = document.getElementById("testdiv");

testdiv.appendChild(para);

var txt = document.createTextNode("Hello world");

para.appendChild(txt);

}

综合举例:

<p>This is <em>my</em> content.</p>

 技术分享

 

这些html内容对应着一个p元素节点,它本身又包含以下几个子节点

1,一个文本节点,其内容是“This is

2,一个元素节点,这个元素节点的名字是“em”;这个元素节点还包含着:

(1),一个文本节点,内容是my

3,一个文本节点,其内容是“ content.”(第一个字符是空格,最后一个字符是英文句号)。

window.onload = function() {

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

var txt1 = document.createTextNode("This is ");

para.appendChild(txt1);

var emphasis = document.createElement("em");

var txt2 = document.createTextNode("my");

emphasis.appendChild(txt2);

para.appendChild(emphasis);

var txt3 = document.createTextNode(" content.");

para.appendChild(txt3);

var testdiv = document.getElementById("testdiv");

testdiv.appendChild(para);

}

《DOM Scripting》学习笔记-——第七章 动态创建html内容