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

2019独角兽企业重金招聘Python工程师标准>>>

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

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
  

 

转载于:https://my.oschina.net/u/3972188/blog/2998033