深入解读JavaScript中BOM和DOM(1)(2)
3、插入节点 appendChild() : var container = document .createElement(p); var t = document .createTextNode(cssrain); container.appendChild(t); document.body.appendChild(container); 它经常跟crea
3、插入节点
appendChild() :
- var container = document.createElement("p");
- var t = document.createTextNode("cssrain");
- container.appendChild(t);
- document.body.appendChild(container);
它经常跟createElement()和createTextNode(),cloneNode()配合使用。另外appendChild()不仅可以用来追加新的元素，也可以你挪动文档中现有的元素。看下面的例子：
- <p id="msg">msg</p>
- <p id="content">content</p>
- <p id="aaa">aaaaaaaa</p>
- <script>
- var mes = document.getElementById("msg");
- var container = document.getElementById("content");
- container.appendChild(mes);
- </script>
- //发现msg放到 content 后面去了。
- <p id="content">
- content
- <p id="msg">msg</p>
- </p>
- <p id="aaa">aaaaaaaa</p>
第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，相当于appendChild();我们看看insertBefore()怎么使用：
- <div id="cssrian">
- <p id="content">1111</p>
- <div id="msg">msg<div>test</div></div>
- <p id="content">222</p>
- <p id="aaa">aaaaaaaa</p>
- </div>
- <script>
- var msg = document.getElementById("msg");
- var aaa = document.getElementById("aaa");
- var test = document.getElementById("cssrian");
- test.insertBefore( msg , aaa );
- </script>
- // 我们发现ID为msg的 插入到了aaa的前面。
Js内部处理方式跟 appendChild()相似。
4、删除节点
removeChild():
- <body>
- <div id="cssrain">
- <div id="a">a </div>
- <div id="b">b </div>
- <div id="c">c </div>
- </div>
- </body>
- <script>
- var msg = document.getElementById("cssrain");
- var b = document.getElementById("b");
- msg.removeChild(b);
- </script>
如果不知道要删除的节点的父节点是什么？可以使用parentNode属性。比如：
- <body>
- <div id="cssrain">
- <div id="a">a </div>
- <div id="b">b </div>
- <div id="c">c </div>
- </div>
- </body>
- <script>
- var b = document.getElementById("b");
- var c = b.parentNode;
- c.removeChild(b);
- </script>
注意：你如果想把某个节点从一处移动到另一个地方，不必使用removeChild（）。可以使用前面的 appendChild()和insertBefore(),他们都会自动先删除节点，然后移动到你指定的地方。、
5、替换节点
- Element.repalceChild( newNode , oldNode )：
- <body>
- <div id="cssrain">
- <div id="a">a </div>
- <div id="b">b </div>
- <div id="c">c </div>
- </div>
- </body>
- <script>
- var cssrain = document.getElementById("cssrain");
- var msg = document.getElementById("b");
- var para = document.createElement("p");
- cssrain.replaceChild( para , msg );
- </script>
精彩图集
精彩文章