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);
}