javascript怎么添加元素

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

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

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

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

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

appendChild(newchild)

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

示例1

!DOCTYPE htML>
    html>
    head>
    meta charset="utf-8">
    /head>
    body>
    p id="demo">
    单击按钮创建并添加p标签/p>
    button onclick="myFunction()">
    点我/button>
    script>
function myFunction(){
    	VAR p=document.createElement("p");
    	var t=document.createTextNode("新添的p标签");
    	p.appendChild(t);
    	document.body.appendChild(p);
}
    ;
    /script>
    /body>
    /html>
    

效果图：

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

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

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

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

insertBefore(newchild, refchild)

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

示例2

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    /head>
    body>
    ul id="myList">
    li>
    Coffee/li>
    li>
    Tea/li>
    /ul>
    p id="demo">
    单击按钮插入一个项目列表/p>
    button onclick="myFunction()">
    点我/button>
    script>
function myFunction(){
    	var newITem=document.createElement("LI")	var textnode=document.createTextNode("Water")	newItem.appendChild(textnode)	var list=document.getElementById("myList")	list.insertBefore(newItem,list.childNodes[0]);
}
    /script>
    /body>
    /html>
}
    

效果图：

【相关推荐：javascript学习教程】

以上就是javascript怎么添加元素的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！