在 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