appendChild()方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点

例一：向ul中添加li项

代码段：

<body><ul id="myList"><li>Coffee</li><li>Tea</li></ul><p id="demo">点击按钮将项目添加到列表中</p><button onclick="myFunction()">点我</button><p>注意：首先创建一个节点，然后创建一个文本节点</br>然后将文本节点添加到LI节点上，最后将节点添加到列表中</p><script>function myFunction(){var myList = document.getElementById('myList');var node = document.createElement('li');var textNode = document.createTextNode('Water');node.appendChild(textNode);myList.appendChild(node);}</script>
</body>

效果展示：

例二：左右select中元素可以左右移动

代码段：

<body><select id="select1" multiple="multiple" size="10"><option>左1</option><option>左2</option><option>左3</option><option>左4</option><option>左5</option></select><button class="" onclick="toRight()">点我>></button><button class="" onclick="toLeft()">点我<<</button><select id="select2" multiple="multiple" size="10"><!-- multiple当该属性为 true 时，可选择多个选项 --><!-- size当规定下拉列表中可见选项的数目--><option>右1</option><option>右2</option><option>右3</option><option>右4</option><option>右5</option></select><script type="text/javascript">var select1 = document.getElementById('select1');var select2 = document.getElementById('select2');function toRight(){var childes = select1.childNodes;// childNodes 属性返回包含被选节点的子节点的 NodeListfor(let i = 0; i <childes.length; i++ ){if(childes[i].selected){select2.appendChild(childes[i]);}}};function toLeft(){var childes = select2.childNodes;// childNodes 属性返回包含被选节点的子节点的 NodeListfor(let i = 0; i <childes.length; i++ ){if(childes[i].selected){select1.appendChild(childes[i]);}}}</script></body>

效果展示：

appendChild()方法是向节点添加最后一个子节点，也可以使用此方法从一个元素向另一个元素移动元素

appendChild()方法相关推荐

HTML DOM appendChild() 方法
1. 1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <ul id="myList"><li& ...
html添加子节点方法,HTML DOM appendChild() 方法
HTML DOM appendChild() 方法 appendChild()方法的作用是:在指定父节点的子节点列表的末尾添加一个节点. 如果给定的子节点是文档中现有节点的引用,appendChild ...
C# 通过ImportNode AppendChild方法合并XmlDocument，XML转为DataTable
C# 通过ImportNode AppendChild方法合并XmlDocument,XML转为DataTable var doc1 = new XmlDocument(); var doc2 = n ...
js中appendChild()方法
appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点,但如果Node是页面中的DOM对象,那么就不是添加节点了,就是直接Move节点. ① 创建原来没有的节点 & ...
js：插入节点appendChild insertBefore使用方法
首先从定义来理解这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法: ...
JavaScript中的appendChild（）方法
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点. 实例一: <!DOCTYPE html> <html> <head> <met ...
js插值法的使用_初学js插入节点appendChild insertBefore使用方法
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置. 首先从定义来理解这两 ...
一些方法：JQ: append() 、appendTo() || JS：appendChild()：
JQ .append() 方法实例在每个 p 元素结尾插入内容: $("button").click(function(){$("p").append(&q ...
一些重要的 XML DOM 方法概述
DOM(Document Object Model 文档对象模型)定义了访问和操作文档的标准方法.在本章中我们将介绍一些其他重要的 XML DOM 方法. 获取元素的值下面的实例中使用的 XML 文 ...

appendChild()方法

代码段：

效果展示：

代码段：

效果展示：

appendChild()方法相关推荐

最新文章

热门文章