day-13.3 DOM操作，增加节点 

JS中的对DOM的逻辑结构，即元素节点的存在，和元素节点的布局是分离的；
元素都存在document这个大的结构内，
但是布局的话根据实际情况去布局；
也就是说，创建节点需要分两步执行，
1、先在document里面创建一个节点，
2、再对节点进行布局；
 1 <body>
 2         <div id="wrap">
 3             <p></p>
 4             <span>111</span>
 5             <span class="txt"></span>
 6         </div>
 7         
 8         <script>
 9             var oWrap = document.getElementById("wrap"),
10                 op = document.createElement("p");
11                 op.innerHTML = "这是一个新添加的P标签";
12                 op.onclick = function () {
13                     alert("op");
14                 };
15                 oWrap.appendChild(op); //在oWrap的所有子节点的最后添加op,
16                                         // 这也可以看出，JS中的对DOM的逻辑结构，即元素节点的存在，和元素节点的布局是分离的；元素都存在document这个大的结构内，但是布局的话根据实际情况去布局；比如这里创建的P元素节点先存在于document之下，再通过appendchild布局到oWrap之下；
17             var newSpan = document.createElement("div"),
18                 oldSpan = document.getElementsByClassName("txt");
19                 newSpan.innerHTML = "这是新添加的span标签";
20                 newSpan.onclick = function () {
21                     alert("ospan");
22                 };
23                 oWrap.insertBefore(newSpan,oldSpan[0]); //
24                 console.log(oWrap.children); //输出 0:p,1:div,2:span.txt,3:p;的伪数组，可以证明oWrap.children是动态获取的；
25                 oWrap.replaceChild(op,oWrap.children[2]); //用op替换了 ===》oWrap的第二个子元素节点，也可以替换所有子节点，只不过这里的children是获取子元素节点的API；
26                 oWrap.appendChild(oWrap.children[1].cloneNode(true)); // .cloneNode()克隆的API，默认参数（空值）为false，只克隆元素，不克隆元素里面的内容，参数为true,为深度克隆，克隆元素里面的内容。
27                 //console.log(oWrap.children); //
28 
29         </script>
30 </body>

 

posted @ 2018-06-21 11:57  bibiguo  阅读(120)  评论(0)    收藏  举报