javascript中添加元素的方法

本篇内容主要讲解“javascript中添加元素的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript中添加元素的方法”吧!

成都创新互联专注于企业营销型网站建设、网站重做改版、高州网站定制设计、自适应品牌网站建设、成都h5网站建设、商城开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为高州等各大城市提供网站开发制作服务。

方法：1、appendChild()方法在末尾插入新元素，语法“appendChild(newchild)”；2、insertBefore()方法，在开头插入新元素，新语法“insertBefore(newchild,refchild)”。

在文档中有两种办法插入新节点（元素），一种是在开头插入，一种是在末尾插入。

appendChild()方法：在末尾插入新节点

JavaScript appendChild() 方法可向当前节点的子节点列表的末尾添加新的子节点。用法如下：

appendChild(newchild)

参数 newchild 表示新添加的节点对象，并返回新增的节点。

示例1

单击按钮创建并添加p标签

点我

效果图：

如果文档树中已经存在参数节点，则将从文档树中删除，然后重新插入新的位置。如果添加的节点是 DocumentFragment 节点，则不会直接插入，而是把它的子节点插入当前节点的末尾。

将元素添加到文档树中，浏览器会立即呈现该元素。此后，对这个元素所作的任何修改都会实时反映在浏览器中。

insertBefore()方法：在开头插入新节点

JavaScript insertBefore() 方法可向当前节点的子节点列表的开头添加新的子节点。用法如下：

insertBefore(newchild, refchild)

其中参数 newchild 表示新插入的节点，refchild 表示插入新节点的节点，用于指定插入节点的后面相邻位置。插入成功后，该方法将返回新插入的子节点。

示例2

Coffee
Tea
单击按钮插入一个项目列表

点我




}

效果图：

到此，相信大家对“javascript中添加元素的方法”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！