javascript 基础 创建动态标记 2017-1-8

1.  

var hello = document.getElementById("c");
    hello.innerHTML = "<h1>jajajajaj</h1>";

他针对的是当前标签下的以字符串表示的节点 他适合大面积 大量的替换 他同时支持读写 但没有任何的返回值 他就想一把大锤 毫无精细可言 但是比document.write还是好了很多。

2. 

第二种方法是基于DOM技术 分为两步 先创建元素 然后把元素加入文档之中

我们先来看第一步

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

创建一个一个P标签 但要注意 他除了被newp变量指向以外和文档并无关系 他就像一个孤儿 他不会在文档里生成 那么下一步就是把这个孤儿指向到某个位置。

接着我们看第二步

    var newp = document.createElement("p");
    var tagp = document.getElementById("c");
    tagp.appendChild(newp);

appendChild就是给tagp添加了一个子元素节点 根据我的观察 所添加的元素节点会被添加到末尾

3.

现在让我们更近一部 往新增加的元素节点之中填充文本节点

window.onload = function () {
    var newp = document.createElement("p");
    var txt = document.createTextNode("HelloWorld");
    newp.appendChild(txt);
    var tagp = document.getElementById("c");
    tagp.appendChild(newp);
}

增强版

    var faP = document.createElement("p"); //创建主父节点
    var ctext1 = document.createTextNode("This is"); //创建第一个文本节点
    faP.appendChild(ctext1); //将文本节点1放入主父节点之中
    var cEm = document.createElement("em"); //创建子em节点
    var cEmtext = document.createTextNode("my"); //创建em的子文本节点
    cEm.appendChild(cEmtext); //将em的子节点放入em中
    faP.appendChild(cEm); //将em和他的子节点放入父节点
    var ctext2 = document.createTextNode("content"); //创建第二个文本节点
    faP.appendChild(ctext2); //将第二个文本节点放入父节点之中
    tagp.appendChild(faP); //将父节点链接到document

body的返回肯定是个数组 所以你想要在body增补节点就必须要加[0]