如何添加子节点

字数 148阅读 70

如何添加子节点

代码

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表中添加项目。</p>

<button onclick="myFunction()">亲自试一试</button>

<script>
function myFunction()
{
var node=document.createElement("LI");
var 
//创建新节点并储存在变量node中。
textnode=document.createTextNode("Water");
//创建文本节点并储存在变量textnode中。
node.appendChild(textnode);
//node代表母节点,textnode代表希望添加的节点。
document.getElementById("myList").appendChild(node);
}
</script>

<p><b>注释:</b>首先创建 LI 节点,然后创建文本节点,然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>

</body>
</html>

分析

首先createElement创建了一个元素标签。
之后为这个元素创建了文本内容。(文本节点)
最后appendChild() 方法向节点添加最后一个子节点。
也就是把文本内容添加到元素的标签中。
这三句的结果就是做了这么一件事,用html语言级数
<li>Water</li>
接下来还有一件事,就是这句插入到哪里?
document.getElementById("myList").appendChild(node);
这句表明插入的Mylist的最后一行里。

参考

HTML DOM appendChild() 方法

推荐阅读更多精彩内容

  • 一个盒子的宽高为屏幕的一半,要垂直居中于屏幕万能居中法 定位跟 CSS3 transform:translate(...
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
  • 本篇是基于《JavaScript高级程序设计(第3版)》DOM相关章节做的整理与归纳,概述了DOM的常见节点类型及...
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
  • (一) 白果在办公楼下闲逛,头脑里飘过与罗丽坤本该有的尴尬没有出现,反而平时见面热情了很多。只是那些藏在人内心的秘...