之前学习了DOM中各种节点的访问方法,DOM所包含的内容远不止如此,DOM编程还包括当DOM树已经构建起来之后再添加节点。
1.创建新节点
document对象中包含了多个创建各种节点的方法。《JavaScript高级程序设计》中专门设计了一个表格,来说明每个方法的原型、作用、IE、Firefox、Opera、Safari等浏览器的支持情况。一眼望去几乎都是一些们获得支持的方法(很可能是因为这本书出的时候还很早,各种浏览器的版本都还很小)。
创建节点最有用的方法主要有:CreateElement()、CreateTextNode(),下面分别学习。
2.CreateElement()、CreateTextNode()、appendChild()
现在有如下的需求:在一个HTML的DOM树加载完成之后,添加一个<p>元素,元素的文本内容是"A New Element"。原始的html如下:
- <html>
- <head>
- <title>createElement() Demo</title>
- </head>
- <body>
- </body>
- </html>
现在要把<p>A New Element</p>添加到HTML的body中。步骤如下:
- //第一步:创建p元素
- var oP = document.createElement("p");
- //第二步:创建文本节点
- var oTxt = document.createTextNode("A New Element");
- //第三步:将文本节点加到p元素的子元素列表中
- oP.appendChild(oTxt);
- //第四步:将p元素添加到body的子元素列表中
- document.body.appendChild(oP);
为了显示出添加的效果,在body中添加一个按钮,一点击就执行上述代码。完整的例子如下:
- <html>
- <head>
- <title>createElement() Demo</title>
- <script type="text/javascript">
- function createElementTest() {
- //第一步:创建p元素
- var oP = document.createElement("p");
- //第二步:创建文本节点
- var oTxt = document.createTextNode("A New Element");
- //第三步:将文本节点加到p元素的子元素列表中
- oP.appendChild(oTxt);
- //第四步:将p元素添加到body的子元素列表中
- document.body.appendChild(oP);
- }
- </script>
- </head>
- <body>
- <input type="button" value="添加" onclick="createElementTest()"/>
- </body>
- </html>
3. removeChild(),replaceChild(),insertBefore()方法
既然能添加节点,自然也能删除节点。要删除某个节点,可以调用其parentNode的removeChild()方法删除掉该节点。依然以上面的例子来学习。
- //第一步:获取p元素
- var oP = document.body.getElementsByTagName("p").item(0);
- //第二步:获取p元素的父节点
- var pNode = oP.parentNode;
- //第三步:调用父节点的删除方法
- pNode.removeChild(oP);
完整的代码如下:
- <html>
- <head>
- <title>createElement() Demo</title>
- <script type="text/javascript">
- function createElementTest() {
- //第一步:创建p元素
- var oP = document.createElement("p");
- //第二步:创建文本节点
- var oTxt = document.createTextNode("A New Element");
- //第三步:将文本节点加到p元素的子元素列表中
- oP.appendChild(oTxt);
- //第四步:将p元素添加到body的子元素列表中
- document.body.appendChild(oP);
- }
- function removeChildTest() {
- //第一步:获取p元素
- var oP = document.body.getElementsByTagName("p").item(0);
- //第二步:获取p元素的父节点
- var pNode = oP.parentNode;
- //第三步:调用父节点的删除方法
- pNode.removeChild(oP);
- }
- </script>
- </head>
- <body>
- <input type="button" value="添加" onclick="createElementTest()"/>
- <input type="button" value="删除" onclick="removeChildTest()"/>
- </body>
- </html>
此外,我们也可以不删除节点,而只是替换节点。当然,这个也需要通过调用被替换节点的父节点的方法来实现。现在我们要吧p元素的内容替换成Hello,World!。replaceChild()方法有两个参数:新节点,被替换节点。代码如下:
- //第一步:创建需要替换的节点
- var newTxt = document.createTextNode("Hello,World!");
- //第二步:获取到被替换的节点
- var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
- //第三步:获取到需要被替换节点的父节点
- var oP = document.body.getElementsByTagName("p").item(0);
- //第四步:替换文本节点
- oP.replaceChild(newTxt,oldTxt);
再添加一个按钮来触发替换文本的方法:
- <html>
- <head>
- <title>createElement() Demo</title>
- <script type="text/javascript">
- function createElementTest() {
- //第一步:创建p元素
- var oP = document.createElement("p");
- //第二步:创建文本节点
- var oTxt = document.createTextNode("A New Element");
- //第三步:将文本节点加到p元素的子元素列表中
- oP.appendChild(oTxt);
- //第四步:将p元素添加到body的子元素列表中
- document.body.appendChild(oP);
- }
- function removeChildTest() {
- //第一步:获取p元素
- var oP = document.body.getElementsByTagName("p").item(0);
- //第二步:获取p元素的父节点
- var pNode = oP.parentNode;
- //第三步:调用父节点的删除方法
- pNode.removeChild(oP);
- }
- function replaceChildTest() {
- //第一步:创建需要替换的节点
- var newTxt = document.createTextNode("Hello,World!");
- //第二步:获取到被替换的节点
- var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
- //第三步:获取到需要被替换节点的父节点
- var oP = document.body.getElementsByTagName("p").item(0);
- //第四步:替换文本节点
- oP.replaceChild(newTxt,oldTxt);
- }
- </script>
- </head>
- <body>
- <input type="button" value="添加" onclick="createElementTest()"/>
- <input type="button" value="删除" onclick="removeChildTest()"/>
- <input type="button" value="替换" onclick="replaceChildTest()"/>
- </body>
- </html>
最后,我们还可以在一个节点之前插入另一个节点。这就是方法insertBefore()的作用。这个方法也有两个参数:新节点和插在哪个节点之前。接着上面的例子,我们在第一个p元素之前插入另一个p元素,元素的文本是a new element。
代码如下:
- var newNode = document.createElement("p");
- var newTxt = document.createTextNode("a new element");
- newNode.appendChild(newTxt);
- var oldNode = document.body.getElementsByTagName("p")[0];
- var pNode = oldNode.parentNode;
- pNode.insertBefore(newNode,oldNode);
完整的代码如下:
- <html>
- <head>
- <title>createElement() Demo</title>
- <script type="text/javascript">
- function createElementTest() {
- //第一步:创建p元素
- var oP = document.createElement("p");
- //第二步:创建文本节点
- var oTxt = document.createTextNode("A New Element");
- //第三步:将文本节点加到p元素的子元素列表中
- oP.appendChild(oTxt);
- //第四步:将p元素添加到body的子元素列表中
- document.body.appendChild(oP);
- }
- function removeChildTest() {
- //第一步:获取p元素
- var oP = document.body.getElementsByTagName("p").item(0);
- //第二步:获取p元素的父节点
- var pNode = oP.parentNode;
- //第三步:调用父节点的删除方法
- pNode.removeChild(oP);
- }
- function replaceChildTest() {
- //第一步:创建需要替换的节点
- var newTxt = document.createTextNode("Hello,World!");
- //第二步:获取到被替换的节点
- var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
- //第三步:获取到需要被替换节点的父节点
- var oP = document.body.getElementsByTagName("p").item(0);
- //第四步:替换文本节点
- oP.replaceChild(newTxt,oldTxt);
- }
- function insertBeforeTest() {
- var newNode = document.createElement("p");
- var newTxt = document.createTextNode("a new element");
- newNode.appendChild(newTxt);
- var oldNode = document.body.getElementsByTagName("p")[0];
- var pNode = oldNode.parentNode;
- pNode.insertBefore(newNode,oldNode);
- }
- </script>
- </head>
- <body>
- <input type="button" value="添加" onclick="createElementTest()"/>
- <input type="button" value="删除" onclick="removeChildTest()"/>
- <input type="button" value="替换" onclick="replaceChildTest()"/>
- <input type="button" value="插入" onclick="insertBeforeTest()"/>
- </body>
- </html>
参考书目:
《JavaScript高级编程》