java动态添加元素_JavaScript实现动态添加、移除元素或属性的方法分析

本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考，具体如下：

JavaScript 动态添加、移除元素

appendChild(newnode)

向节点的子节点列表的末尾添加新的子节点。

insertBefore(newnode, existingnode)

在已有子节点之前插入新的子节点。

removeChild(node)

删除元素的某个指定的子节点，并以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

innerHTML

属性设置或返回表格行的开始和结束标签之间的 HTML。

测试用例

.style1 { background-color:yellow; width:200px;height:100px;float:left;}

.style2 { background-color:#aa0; width:200px;height:100px;float:left;}

.style3 { background-color:rgb(0,200,200); width:200px;height:100px;float:left;}

.item-style {background-color:pink;}

function addElement1() {

var container = document.getElementById("container1");

var elem1 = document.createElement("div");

elem1.setAttribute("class", "item-style");

var textnode1 = document.createTextNode("appendChild");

elem1.appendChild(textnode1);

container.appendChild(elem1);

var middleChild = document.getElementById("middle-child");

var elem2 = document.createElement("div");

elem2.setAttribute("class", "item-style");

var textnode2 = document.createTextNode("insertBefore");

elem2.appendChild(textnode2);

container.insertBefore(elem2, middleChild);

}//欢迎加入全栈开发交流圈一起学习交流：582735936

]//面向1-3年前端人员

} //帮助突破技术瓶颈，提升思维能力

function addElement2() {

var container = document.getElementById("container2");

container.innerHTML = "

Hello World \"2\"

";

}

function removeNode() {

var container = document.getElementById("container3");

var myNode = document.getElementById("myNode");

container.removeChild(myNode);

}

function operateElements() {

addElement1();

addElement2();

removeNode();

}

Middle Child

Hello World

Operate Elements

JavaScript 动态添加、移除属性

setAttribute(attributename, attributevalue)

添加指定的属性，并为其赋指定的值。将属性设置为undefined等同于删除。

removeAttribute(attributename)

删除指定的属性。

getAttributeNode(attributename)

以 Attr 对象返回指定属性名的属性值。

removeAttributeNode(attributenode)

删除 Attr 形式指定的属性，同时返回被删除的Attr 形式的属性。

测试用例

function operateAttributes() {

var node2 = document.getElementById("node2");

//设置font-style和font-size无效，这些属性脱离style单独设置是无效的

node2.setAttribute("style", "color:red;");

var node3 = document.getElementById("node3");

node3.setAttribute("font-size", undefined);

var node4 = document.getElementById("node4");

//font-style和font-size的remove无效，因为它们没有单独存在

node4.removeAttribute("font-size");

var node5 = document.getElementById("node5");

//无法获取font-style和font-size

var attributeNode = node5.getAttributeNode("style");

var attr = node5.removeAttributeNode(attributeNode);

node5.innerHTML = "attr=" + attr + ", attr.name=" + attr.name + ", attr.value=" + attr.value;

}

0 Hello World

1 Hello World : font-size、font-style等，这些属性脱离style单独设置是无效的

2 Hello World setAttribute

3 Hello World setAttribute

4 Hello World removeAttribute

5 Hello World getAttributeNode & removeAttributeNode