javascript - 给一个html元素添加一串html属性

Question

我有一个用有效 html 编写的属性字符串，我想将这些属性放在实际的 html 元素 上(而不是元素的 html string)。

例如，我在合理命名的 attributesStr 变量中有属性字符串，我想将这些属性添加到 #htmlElement div。

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

// Your special code to add the attributes to `#htmlElement` goes here.

<div id="htmlElement">
    The HTML element!
</div>

运行 JQuery/JavaScript 代码后，#htmlElement 应如下所示:

<div id="htmlElement" class='regularClass' title='Title... with spaces!' style='color: red; font-weight: bold;' data-attributenovalue>
    The HTML element!
</div>

如何在 JavaScript 或 Jquery 中执行此操作？

---

第一次尝试:我想我可以通过 .split()ing attributesStr 空格来做到这一点，然后在 上拆分每个单独的属性键值对>=，然后迭代该数组并使用 JQuery 的 .prop() 或 .attr() 添加每个键值对，但这行不通有两个原因:

1. 它会在 style 和 title 属性上失败，因为它们有空格。
2. 它可能在没有值的属性上失败。

Answer 1

获取 attributesStr 并将其插入到现有的 outerHTML 中。为此，您需要通过删除现有标记、注入(inject)字符串并放回其余 html 来重建节点。

var attributesStr = "";
attributesStr += " class='regularClass'"; // Needs to handle key value attributes.
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces.
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties.
attributesStr += " data-attributenovalue"; // And attributes with no value.

var element = document.getElementById('htmlElement');

var tag = element.tagName;

element.outerHTML = '<' + tag + attributesStr + element.outerHTML.substring(tag.length + 1);

<div id="htmlElement">
  The HTML element!
</div>