本文实例讲述了 JavaScript 实现动态添加, 移除元素或属性的方法. 分享给大家供大家参考, 具体如下:
JavaScript 动态添加, 移除元素
appendChild(newnode)
向节点的子节点列表的末尾添加新的子节点.
insertBefore(newnode, existingnode)
在已有子节点之前插入新的子节点.
removeChild(node)
删除元素的某个指定的子节点, 并以 Node 对象返回被删除的节点, 如果节点不存在则返回 null.
innerhtml
属性设置或返回表格行的开始和结束标签之间的 HTML.
测试用例
- <HTML>
- <head>
- <style type="text/CSS">
- .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;}
- </style>
- <script type="text/javascript">
- 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);
- }
- function addElement2() {
- var container = document.getElementById("container2");
- container.innerHTML = "<div>Hello World \"2\"</div>";
- }
- function removeNode() {
- var container = document.getElementById("container3");
- var myNode = document.getElementById("myNode");
- container.removeChild(myNode);
- }
- function operateElements() {
- addElement1();
- addElement2();
- removeNode();
- }
- </script>
- </head>
- <body onload="operateElements()">
- <div id="container1" class="style1">
- <div id="middle-child">Middle Child</div>
- </div>
- <div id="container2" class="style2"></div>
- <div id="container3" class="style3"><p id="myNode">Hello World</p></div>
- <div style="clear:both;"/>
- <button onclick="operateElements()">Operate Elements</button>
- </body>
- </HTML>
JavaScript 动态添加, 移除属性
setAttribute(attributename, attributevalue)
添加指定的属性, 并为其赋指定的值. 将属性设置为 undefined 等同于删除.
removeAttribute(attributename)
删除指定的属性.
getAttributeNode(attributename)
以 Attr 对象返回指定属性名的属性值.
removeAttributeNode(attributenode)
删除 Attr 形式指定的属性, 同时返回被删除的 Attr 形式的属性.
测试用例
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <script type="text/javascript">
- 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;
- }
- </script>
- </head>
- <body onload="operateAttributes()">
- <p id="node0" style="font-style:italic;font-size:12px;">0 Hello World</p>
- <p id="node1" font-size="12px" font-style="italic">1 Hello World : font-size,font-style 等, 这些属性脱离 style 单独设置是无效的 </p>
- <p id="node2" style="font-style:italic;font-size:12px;">2 Hello World setAttribute</p>
- <p id="node3" style="font-style:italic;font-size:12px;">3 Hello World setAttribute</p>
- <p id="node4" style="font-style:italic;font-size:12px;">4 Hello World removeAttribute</p>
- <p id="node5" style="font-style:italic;font-size:12px;">5 Hello World getAttributeNode & removeAttributeNode</p>
- </body>
- </HTML>
为了学习工作与休闲娱乐互不冲突, 现新建圈 [码农茶水铺] 用于程序员生活, 爱好, 交友, 求职招聘, 吐槽等话题交流, 希望各位大神工作之余到茶水铺来喝茶聊天. 群号: 582735936
来源: http://www.qdfuns.com/article/51116/1345a524be5ceae4f5b0693f468423ec.html