HTML DOM setAttribute()、与createAttribute()

setAttribute()、与createAttribute() 都可以动态的为DOM 添加属性；但是用法却不一样；

 

1、setAttribute()

setAttribute() 直接在DOM节点上添加属性：

语法：

element.setAttribute(attributename,attributevalue)

例子：

<p >
    <span>1</span>,
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</p>

在<p>节点上添加title属性：

var p=document.getElementsByTagName('p')[0];
p.setAttribute('title','one to five');

2、createAttribute()用法相对复杂一点；

语法：

element.setAttributeNode(attributenode)

var ti=document.createAttribute('title');//创建独立的属性节点

ti.nodeValue='one to five';//设置属性节点值

var p=document.getElementsByTagName('p')[0];

p.setAttributeNode(ti)//追加的设置属性节点

可以看出，createAttribute()，与setAttributeNode()是在一起使用的，与createTextNode(),createElement() 类似；先独立的创建文本节点、属性节点或元素节点。然后再追加到已有的文档节点后面；不同的是追加文本节点和元素节点使用appendChild()方法；追加属性节点使用setAttributeNode()方法。

直接使用setAttribute()要方便的多。