在 JavaScript 中為 DOM 元素新增屬性

Jagathish 2023年1月30日 2022年5月1日
  1. 使用 setAttribute 方法將屬性設定為 DOM 元素
  2. 使用 setAttributeNode 方法為 DOM 元素設定屬性
在 JavaScript 中為 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>

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

相關文章 - JavaScript DOM