JS DOM编程艺术——动态创建标记—— JS学习笔记2015-7-13(第83天)

DOM方法：

1、createElement

语法：document.createElement(nodeName)

比如：document.createElement("p"); // 将创建一个P元素；

2、appendChild

语法：parent.appendChild(child)

3、creatTextNode

语法：document.createTextNode(text)

example.js

/* 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); // 注意这里的括号里面不需要加引号 比如：para.appendChild("txt") 这样写就错了；
}
*/
//方法二（因为appendChild方法还可以用来连接那些尚未成为文档树的一部分的节点）：

// window.onload = function (){

//     var para = document.createElement("p");
//     var txt = document.createTextNode("Hello World world");
//     para.appendChild(txt);
//     var testdiv = document.getElementById("testdiv");
//     testdiv.appendChild(para);

// }

window.onload = function(){

var para = document.createElement("p");
var txt1 = document.createTextNode("This is");
var emphasis = document.createElement("em");
var txt2 = document.createTextNode("my");
var txt3 = document.createTextNode(" content.");
para.appendChild(txt1);
emphasis.appendChild(txt2);
para.appendChild(emphasis);
para.appendChild(txt3);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}