HTML DOM appendChild() 方法

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4
 5 <ul id="myList"><li>Coffee</li><li>Tea</li></ul>
 6
 7 <p id="demo">请点击按钮向列表中添加项目。</p>
 8
 9 <button οnclick="myFunction()">亲自试一试</button>
10
11 <script>
12 function myFunction()
13 {
14 var node=document.createElement("LI");
15 var textnode=document.createTextNode("Water");
16
17
18 node.appendChild(textnode);
19
20 //此时node为<li>Water</li>
21
22 //(不知为何 appendChild方法能将文本append到标签里)
23
24
25 document.getElementById("myList").appendChild(node);
26 }
27 </script>
28
29 <p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>
30
31 </body>
32 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4
 5 <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
 6 <ul id="myList2"><li>Water</li><li>Milk</li></ul>
 7
 8 <p id="demo2">demo2</p>
 9 <p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
10
11 <button οnclick="myFunction()">亲自试一试</button>
12
13 <script>
14 function myFunction()
15 {
16 var node=document.getElementById("myList2").lastChild;
17
18 //这里倒像是把 <li>Milk</li> 剪切出来了
19 console.log(node);
20 document.getElementById("demo2").appendChild(node);
21
22 //然后再追加到这里
23 }
24 </script>
25
26 </body>
27 </html>
28
29
30
31

-------------------------------------------------- 以上来源于W3School "HTML DOM appendChild() 方法" 一节

转载于:https://www.cnblogs.com/qhxblog/p/8462449.html

HTML DOM appendChild() 方法相关推荐

html添加子节点方法,HTML DOM appendChild() 方法
HTML DOM appendChild() 方法 appendChild()方法的作用是:在指定父节点的子节点列表的末尾添加一个节点. 如果给定的子节点是文档中现有节点的引用,appendChild ...
javascript同级遍历_有用的DOM遍历方法，你需要了解一下
英文 | https://levelup.gitconnected.com/useful-dom-traversal-methods-d2b55cf8e25c翻译 | web前端开发(ID:web_q ...
js中appendChild()方法
appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点,但如果Node是页面中的DOM对象,那么就不是添加节点了,就是直接Move节点. ① 创建原来没有的节点 & ...
027_jQuery DOM 元素方法
1. get()方法 1.1. 语法 $(selector).get(index) 1.2. 参数 1.3. jQuery中的get()函数是取得当前页面中所有匹配的DOM元素集合.这是取得所有匹配元 ...
C# 通过ImportNode AppendChild方法合并XmlDocument，XML转为DataTable
C# 通过ImportNode AppendChild方法合并XmlDocument,XML转为DataTable var doc1 = new XmlDocument(); var doc2 = n ...
dom选择方法的区别
早期的元素选择方法 1.document.getElementById();2.document.getElementsByName();3.document.getElementsByTagName ...
jQuery常用的查找Dom元素方法
jQuery常用的查找Dom元素方法废话不多说,先来个总结,然后下面是demo 一. 同级节点之间的检索(检索深度N=0) next()是在兄弟节点中,往后匹配; prev()是在兄弟节点中,往前匹 ...
appendChild()方法
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点例一:向ul中添加li项代码段: <body><ul id="myList">& ...
html 删除事件,HTML DOM removeEventListener() 方法
HTML DOM removeEventListener() 方法 element.removeEventListener()方法将删除已与element.addEventListener()方法关联 ...

HTML DOM appendChild() 方法

HTML DOM appendChild() 方法相关推荐

最新文章

热门文章