revision:
The setAttributeNode() method adds a new Attr node to the specified element.
The setAttributeNode() method adds an attribute node to an element. It replaces existing attribute nodes and returns an Attribute object.
setAttributeNode(node)
Parameters:
node : required; the Attr node to set on the element.
<div>
<div id="one" align="left">one</div>
<div id="two">two</div>
</div>
<script>
let d1 = document.getElementById("one");
let d2 = document.getElementById("two");
let a = d1.getAttributeNode("align");
d2.setAttributeNode(a.cloneNode(true));
// Returns: 'left'
alert(d2.attributes[1].value);
</script>
Click "Change" to set the class attribute node of the first header.
<div>
<h4>The Element Object</h4>
<p>Click "Change" to set the class attribute node of the first header.</p>
<button onclick="changeNode()">Change</button>
</div>
<style>
.democlass {color: red;}
</style>
<script>
function changeNode() {
const attr = document.createAttribute("class");
attr.value = "democlass";
const element = document.getElementsByTagName("H4")[0];
element.setAttributeNode(attr);
}
</script>
Click "add" to add an href attribute to the element above.
<div>
<a id="myAnchor">Go to lwitters.com</a>
<p>Click "add" to add an href attribute to the element above.</p>
<button onclick="addAttribute()">change</button>
</div>
<script>
function addAttribute() {
// Create a href attribute:
const attr = document.createAttribute("href")
// Set the value of the href attribute:
attr.value = "https://www.lwitters.com";
// Add the href attribute to an element:
document.getElementById("myAnchor").setAttributeNode(attr);
}
</script>