在 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>

要測試上述程式碼的有效性，你可以訪問此連結。