DOM基础(2)
一、插入元素
上一篇文章中我们学会了如何创建元素,但仅仅是创建一个元素而没有插入到HTML中,这是没有意义的。插入元素有以下两种方法:
• appendChild()
• insertBefore()
首先提出一个问题,如果我们想要将文本框中输入的内容在点击“输入”按钮后显示在网页的列表清单中,该怎么做?
我们的思路应该是,先获取按钮的元素,然后为它建立添加点击事件,函数中获取文本框元素,将输入到其中的内容转换为文本节点,再获取列表元素,新建一个元素节点,将文本节点插入元素节点,再将组装后的元素节点插入列表元素中。
代码如下:
<script> //作者太懒不想打代码了,思路上面已经写出,有幸访问本文的读者如果还有疑问,请私信我 </script> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> </ul> <input id="txt" type="text"/><input id="btn" type="button" value="插入"/> </body>
下面开始介绍上面两种方法的功能:
1. appendChild()——将一个新元素插入到父元素的内部子元素的末尾,由于上篇文章中已多次出现此方法,故不多赘述
2. insertBefore()——将一个新元素插入到父元素的某个子元素之前,语法为A.insertBefore(B,ref),其中,ref表示指定的子元素,当然大家也一定清楚,A代表父元素,B代表新子元素啦!
我们不难发现,这两种方法很好地形成了互补,第一种方法是插入到最后一个子元素后,而第二种方法是插入到任意一个子元素前,那么我们就可以将新元素插入到任何一个地方啦
删除,复制,替换元素待更新~