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

创新互联公司主营望花网站建设的网络公司,主营网站建设方案,重庆APP软件开发,望花h5微信小程序搭建,望花网站营销推广欢迎望花等地区企业咨询

JavaScript 动态添加、移除元素

appendChild(newnode)
向节点的子节点列表的末尾添加新的子节点。

insertBefore(newnode, existingnode)
在已有子节点之前插入新的子节点。

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

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

测试用例

  
    
    
  
  
    

      
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程序设计有所帮助。