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;}
    
    
  
  
    
      Middle Child
    
    
    
Hello World
    
    Operate Elements
  

Javascript 动态添加、移除属性

setAttribute(attributename, attributevalue)
添加指定的属性，并为其赋指定的值。将属性设置为undefined等同于删除。

removeAttribute(attributename)
删除指定的属性。

getAttributeNode(attributename)
以 Attr 对象返回指定属性名的属性值。

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

测试用例

  
    
    
  
  
    
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
  

感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript操作DOM技巧总结》、《Javascript页面元素操作技巧总结》、《Javascript事件相关操作与技巧大全》、《Javascript查找算法技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript错误与调试技巧总结》

希望本文所述对大家Javascript程序设计有所帮助。