插入节点appendChild()，JavaScript进阶篇教程-慕课网

插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。

我们来看看，div标签内创建一个新的 P 标签，代码如下:

运行结果:

HTML
JavaScript
This is a new p

任务

试一试，完成为UL标签添加一个新项PHP。

1.在代码编辑器中，script标签内，为ul添加一个li。

2.设置li内容为PHP。

?不会了怎么办: <body>

<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>

<script type="text/javascript">

var otest = document.getElementById("test");
var newnode = document.createElement("li");
var newtext= document.createTextNode("PHP");
newnode.appendChild(newtext);
otest.appendChild(newnode);

</script>

</body>

问答
评论
笔记
资料下载
代码

全部精华我要发布

史上最好的答案

最赞回答 / 慕尼黑1441384

史上最简洁的答案（点赞）：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><ul id="test"> <li>JavaScript</li> <li>HT...

2 回答 877 浏览

2022-05-06

代码没有问题，为什么PHP显示不出来

最新回答 / 光太郎

ID名称错误是var a=document.getElementById("test");

1 回答 844 浏览

2020-04-12

<ul id="test"></ul> <script type="text/javascript"> var otest = document.getElementById("test"); var x1=document.createElement("li"); x1.innerHTML="php"; otest.appendChild(x1); </script> 你的那个ID是不是少了一个o

2 回答 704 浏览

2020-03-12

还是没有理解？？

最赞回答 / 林迦叶

获取ID为test的节点，创建p节点，给p节点的文本内容,然后将这个p节点插入添加到otest

1 回答 541 浏览

2022-07-26

为什么PHP显示不出来？

最赞回答 / 慕函数4478988

你的var newnode=document.createElement("li")这一句好像忘了加";",可能是因为这个？？

1 回答 587 浏览

2020-02-17

没有问题？？？

最赞回答 / 今朝似梦愿回昨

嗯嗯嗯

1 回答 594 浏览

2019-10-14

9-12提问

已采纳回答 / 慕雪6475486

<...图片...>这两句最后面的分号写成了冒号了

1 回答 618 浏览

2019-09-23

为什么我的DOCUMENT不会输出内容呢

最新回答 / 我信你个鬼

ar otest = document.getElementById("test"); var newnode = document.createElement("li"); otest.appendChild(newnode); newnode.innerHTML = "PHP";

3 回答 1062 浏览

2019-09-02

这个编译器结果是有问题吧

+ 我来回答回答最高可+2积分

4 回答 1156 浏览

2022-04-21

createTextNode和innerHTML区别？

最赞回答 / iFlowers

innerHTML可以用来获取和更新文本及标签，但添加的标签如果缺失关闭标签，可能会影响整个页面的设计。更坏的情况，使用innerHTML把用户提供内容添加到一个页面上，他们可能会添加恶意内容，如XSS攻击。而createTextNode则可以避免以上情况，如果想在DOM中添加一个空元素，可以跳过它，在createElemen()后直接appendChild()即可。

3 回答 1302 浏览

2019-08-20