本文摘自PHP中文网,作者青灯夜游,侵删。
方法:1、appendChild()方法在末尾插入新元素,语法“appendChild(newchild)”;2、insertBefore()方法,在开头插入新元素,新语法“insertBefore(newchild,refchild)”。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
在文档中有两种办法插入新节点(元素),一种是在开头插入,一种是在末尾插入。
appendChild()方法:在末尾插入新节点
JavaScript appendChild() 方法可向当前节点的子节点列表的末尾添加新的子节点。用法如下:
1 |
|
参数 newchild 表示新添加的节点对象,并返回新增的节点。
示例1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
效果图:
如果文档树中已经存在参数节点,则将从文档树中删除,然后重新插入新的位置。如果添加的节点是 DocumentFragment 节点,则不会直接插入,而是把它的子节点插入当前节点的末尾。
将元素添加到文档树中,浏览器会立即呈现该元素。此后,对这个元素所作的任何修改都会实时反映在浏览器中。
insertBefore()方法:在开头插入新节点
JavaScript insertBefore() 方法可向当前节点的子节点列表的开头添加新的子节点。用法如下:
1 |
|
其中参数 newchild 表示新插入的节点,refchild 表示插入新节点的节点,用于指定插入节点的后面相邻位置。插入成功后,该方法将返回新插入的子节点。
示例2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
效果图:
【相关推荐:javascript学习教程】
以上就是javascript怎么添加元素的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
介绍javascript 内存管理+如何处理4个常见的内存泄漏
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者