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()要方便的多。
HTML DOM setAttribute()、与createAttribute()用法区别
原文地址：https://www.cnblogs.com/engeng/p/8383890.html