JavaScript 经典实例：第三版

318

｜

第

12

章

//

创建一个新段落

const

para = document.createElement('p');

//

把文本内容添加到段落中，然后插入新建的段落

para.appendChild(txtNode);

div.insertBefore(para, oldPara);

</script>

</body>

</html>

把用户提供的文本直接插入网页，不做净化，不是个好主意。一旦留下口子，

各种乱七八糟的内容就会蜂拥而入。例程

12-2

只用于演示。

12.10

把新元素插入

DOM

的特定位置

12.10.1

问题

你想把一个新段落插入到

div

元素内的第三个段落前面。

12.10.2

方案

使用某个方法获取第三个段落，例如使用

getElementsByTagName()

获取

div

元素

中的所有段落。然后，使用

createElement()

和

insertBefore()

两个

DOM

方法，

把新段落插入到当前的第三个段落前面。

//

获取目标

div

元素

const

div = document.getElementById('target');

//

获取段落集合

const

paras = div.getElementsByTagName('p');

//

创建段落元素，添加文本内容

const

newPara = document.createElement('p');

const

text = document.createTextNode('New paragraph content');