在 JavaScript 中为 DOM 元素添加属性

1. 使用 setAttribute 方法将属性设置为 DOM 元素
2. 使用 setAttributeNode 方法为 DOM 元素设置属性

本教程教授如何向 DOM 元素添加属性。我们可以使用两种方法向 DOM 元素添加属性。

首先是 setAttribute(name, value)，其次是 setAttributeNode(attribute_node)。

使用 setAttribute 方法将属性设置为 DOM 元素

setAttribute 方法将：

• 如果指定的属性不存在，则向 DOM 元素添加新属性。
• 如果指定的属性已经存在，则更新 DOM 元素的属性值。

此方法将属性名称和值作为参数。

<div id="div" name="div_ele" > Div </div>

使用 setAttribute 方法设置属性的 JavaScript 代码。

let divElement = document.getElementById("div");
divElement.setAttribute("order", 1);
divElement.setAttribute("name", "DIV");

执行上述代码后，div 元素将有一个新的属性 order，其值为 1，属性 name 的值将从 div_ele 更新为 DIV。

<div id="div" name="DIV" order="1"> Div </div>

使用 setAttributeNode 方法为 DOM 元素设置属性

setAttributeNode 方法的功能类似于 setAttribute 方法。唯一的区别是 setAttributeNode 方法将 Attr 节点作为参数。

<div id="div" name="DIV" order="1"> Div </div>

使用 setAttributeNode 方法设置属性的 JavaScript 代码

let divElement = document.getElementById("div");

let orderAttrNode = document.createAttribute('order');
orderAttrNode.value="2";
divElement.setAttributeNode(orderAttrNode);

let testAttrNode = document.createAttribute('test');
testAttrNode.value="test_div";
divElement.setAttributeNode(testAttrNode);

执行上述代码后，div 元素将有一个新的属性 test，其值为 test_div，属性 order 的值将从 1 更新为 2。

<div id="div" name="DIV" order="2" test="test_div"> Div </div>

要测试上述代码的有效性，你可以访问此链接。