JavaScript中的appendChild()方法示例详解

更新时间：2023年10月09日 11:33:42 作者：梁萌

这篇文章主要介绍了JavaScript中的appendChild()方法,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()方法的文章就介绍到这了,更多相关jsappendChild()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

knockoutjs模板实现树形结构列表
这篇文章主要介绍了knockoutjs模板实现树形结构列表的实现代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-07-07
JS实现页面载入时随机显示图片效果
这篇文章主要介绍了JS实现页面载入时随机显示图片效果,涉及javascript基于随机数与数组的页面元素动态修改相关操作技巧,需要的朋友可以参考下
2016-09-09
JS实现网页上随滚动条滚动的层效果代码
这篇文章主要介绍了JS实现网页上随滚动条滚动的层效果代码,涉及JavaScript页面元素属性的获取、运算及设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
JavaScript下通过的XMLHttpRequest发送请求的代码
JavaScript下通过的XMLHttpRequest发送请求的代码，需要的朋友可以参考下。
2011-06-06
js开发一个类似ChatGPT的AI应用助手
一位创业朋友想做一个垂直领域的AI助手,经过一个月的开发迭代,我们成功上线了第一个版本,这篇文章分享了开发一个类似ChatGPT的应用的过程,包括技术选型、架构设计和实战经验,实现了流式响应、上下文记忆系统和优化提示词,应用得到了用户的高度评价
2024-12-12
JavaScript数据结构学习之数组、栈与队列
这篇文章主要给大家介绍了JavaScript数据结构之数组、栈与队列的相关资料，文中对数组、栈与队列的使用方法进行了详细的总结，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
JS实现的自定义显示加载等待图片插件(loading.gif)
这篇文章主要介绍了JS实现的自定义显示加载等待图片插件,涉及javascript针对图片的动态加载实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
微信小程序文章详情页跳转案例详解
这篇文章主要介绍了微信小程序文章详情页跳转案例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
js添加元素的简单方式示例
这篇文章主要给大家介绍了关于js添加元素的简单方式,文中通过代码示例将每种实现的方法都介绍的非常详细,对大家学习或者使用js具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10
javascript中typeof操作符和constucor属性检测
这篇文章主要介绍了javascript中typeof操作符和constucor属性检测的相关资料,需要的朋友可以参考下
2015-02-02