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() attributesStr对空格进行此操作，然后在=上拆分每个单独的属性键值对，然后迭代该数组并使用JQuery的.prop()或.attr()添加每个键值对，但这有两个原因：

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

Answer 1

取attributesStr并将其插入现有的outerHTML。要实现这一点，您需要通过删除现有标记，注入字符串并放回html的其余部分来重建节点。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

您可以使用 .attr（）在jquery中执行此操作。这是工作片段。

click here for attr() usage

＆＃13;

$(document).ready(function(){
$("#htmlElement").attr("class", "regularClass");
$("#htmlElement").attr("title", "Title... with spaces!");
$("#htmlElement").attr("style", "color: red; font-weight: bold");
$("#htmlElement").attr("data-attributenovalue",true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

＆＃13;

Answer 3

试试这个：

var dummHTML = $("<div "+attributesStr+"></div>");   
$.each(dummHTML[0].attributes, function(i,v){
 $('#htmlElement').attr(v.nodeName,v.nodeValue);
});

Answer 4

也许不是最好的选择，但如果需要使用完整的字符串：

这个想法是：获取元素的内容，然后删除它并使用新属性再次创建它：

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.
var $innerHTML = $("#htmlElement").html()
$("#htmlElement").remove()
var $newElement = "<div id='htmlElement' " + attributesStr + ">" + $innerHTML + "</div>" 

$("body").after($newElement)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

Answer 5

为什么不用'，'

分隔你的字符串

var attributesStr = "";
attributesStr = attributesStr + " class='regularClass'," ; // Needs to handle key value attributes.
attributesStr = attributesStr +" title='Title... with spaces!',"; // And attributes with spaces.
attributesStr = attributesStr +" style='color: red; font-weight: bold;',"; // And style with multiple properties.
attributesStr = attributesStr +" data-attributenovalue,"; // And attributes with no value.

var array = attributesStr.split(',');

array.forEach(function(item){
 property = item.split('=');
 $('#htmlElement').attr(property[0].trim());
 if(property[1]) $('#htmlElement').attr(property[0].trim(), property[1].trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="htmlElement">
    The HTML element!
</div>

Answer 6

这将为您提供第一次拆分

attributesStr.match(/[^\s=]+(=['][^']*['])?/g)

结果：

["class='regularClass'", "title='Title... with spaces!'", "style='color: red; font-weight: bold;'", "data-attributenovalue"]

然后在foreach中，你可以按照你的建议来处理。

将一串html属性添加到html元素

6 个答案: