JavaScript中的appendChild（）方法

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

实例一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<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 textnode=document.createTextNode("Water");node.appendChild(textnode);document.getElementById("myList").appendChild(node);
}
</script>
<p><strong>注意:</strong><br>首先创建一个节点，<br> 然后创建一个文本节点，<br>然后将文本节点添加到LI节点上。<br>最后将节点添加到列表中。</p></body>
</html>

页面效果：

实例一是向ul中添加li项

2.appendChild() 方法从一个元素向另一个元素移动元素。

实例二：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><select id="select1" multiple="multiple" size="10"><option>左1</option><option>左2</option><option>左3</option><option>左4</option><option>左5</option></select><span><button onclick="toRight()">>></button><button onclick="toLeft()"><<</button></span><select id="select2" multiple="multiple" size="10"><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 childs = select1.childNodes;for (var i = 0; i < childs.length; i++) {if (childs[i].selected) {select2.appendChild(childs[i]);}}}function toLeft() {var childs = select2.childNodes;for (var i = 0; i < childs.length; i++) {if (childs[i].selected) {select1.appendChild(childs[i]);}}}</script>
</body></html>

页面效果：

实例二是下拉框选项的移动

总结：

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

JavaScript中的appendChild（）方法相关推荐

Javascript中二进制数据处理方法
Javascript中二进制数据处理方法转载于:https://www.cnblogs.com/motadou/archive/2012/02/19/2358514.html
php中使用confirm,如何使用JavaScript中的confirm()方法
confirm方法的使用:通过给元素设置confirm函数来创建一个带有确认和取消按钮的提示框,当点击确认时返回true,取消时返回false 今天将讲解JavaScript中confirm() 方法 ...
JavaScript 中的forEach()方法
JavaScript 中的forEach方法一.forEach()的定义和用法? 1.第一个是数组的每一项值(必选) 2.第二个是数组下标(可选) 3.第三个是原数组(可选) 4.forEach() ...
JavaScript中的valueOf方法详解
Object.prototype.valueOf() valueOf() 方法返回指定对象的原始值. 语法 object.valueOf() 返回值返回值为该对象的原始值. 描述 JavaScrip ...
JavaScript中的部分函数/方法参考
目录 1.Object.defineProperty方法 2.for.for...in.for...of.forEach方法 for循环(可使用return.break等来中断循环) forEach循 ...
javascript中replace使用方法总结
这篇文章主要为大家详细介绍了javascript中replace的使用方法,使用replace和正则表达式共同实现字符串trim方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 ECMAScri ...
Javascript中的Callback方法浅析
什么是callback? 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函 ...
javascript字典中添加数组_如何在JavaScript中使用数组方法：Mutator方法
JavaScript中的数组由元素列表组成.JavaScript有许多有用的内置方法来处理数组.修改原始数组的方法称为mutator方法,返回新值或表示的方法称为accessor方法.在本教程中,我们 ...
javascript中常用数组方法详细讲解
javascript中数组常用方法总结 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔 ...

JavaScript中的appendChild（）方法

JavaScript中的appendChild（）方法相关推荐

最新文章

热门文章