Javascript 向html元素添加html属性字符串

我有一个用有效html编写的属性字符串，我想把这些属性放在一个实际的html元素上（而不是一个元素的html字符串）

例如，我在合理命名的

attributesStr

变量中有一个属性字符串，我想将这些属性添加到

#htmlElement

div中

var attributesStr=”“；
attributesStr+=“class='regularClass'”；//需要处理键值属性。
attributesStr+=“title='title…带空格！'；”//和带有空格的属性。
attributesStr+=“style='color:red；font-weight:bold；”“；//和具有多个属性的样式。
attributesStr+=“数据属性值”；//和没有值的属性。
//将属性添加到`#htmlElement`的特殊代码出现在此处。

HTML元素！

为什么不用“，”分隔字符串

var attributesStr=”“；
attributesStr=attributesStr+“class='regularClass'，”；//需要处理键值属性。
attributesStr=attributesStr+“title='title…带空格！'，”；//和带有空格的属性。
attributesStr=attributesStr+“style='color:red；font-weight:bold；'，”；//和具有多个属性的样式。
attributesStr=attributesStr+“数据属性值”；//和没有值的属性。
var数组=attributestr.split（'，'）；
array.forEach（函数（项）{
property=item.split（'='）；
$（'#htmlElement'）.attr（属性[0].trim（））；
if（属性[1]）$（'#htmlElement'）.attr（属性[0].trim（），属性[1].trim（））；
});

HTML元素！
为什么不用“，”分隔字符串


var attributesStr=”“；
attributesStr=attributesStr+“class='regularClass'，”；//需要处理键值属性。
attributesStr=attributesStr+“title='title…带空格！'，”；//和带有空格的属性。
attributesStr=attributesStr+“style='color:red；font-weight:bold；'，”；//和具有多个属性的样式。
attributesStr=attributesStr+“数据属性值”；//和没有值的属性。
var数组=attributestr.split（'，'）；
array.forEach（函数（项）{
property=item.split（'='）；
$（'#htmlElement'）.attr（属性[0].trim（））；
if（属性[1]）$（'#htmlElement'）.attr（属性[0].trim（），属性[1].trim（））；
});

HTML元素！
这将获得第一次拆分

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

结果:

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

然后在
foreach
中，您可以按照建议处理属性。
这将获得第一次拆分

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

结果:

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

然后在
foreach
中，您可以按照建议处理attr。
您可以在jquery中使用.attr（）来执行此操作。下面是工作片段



$（文档）.ready（函数（）{
$（“#htmlElement”）.attr（“类”、“常规类”）；
$（“#htmlElement”）.attr（“title”，“title…带空格！”）；
$（“#htmlElement”）.attr（“样式”，“颜色：红色；字体重量：粗体”）；
$（“#htmlElement”）.attr（“数据属性值”，true）；
});

HTML元素！
您可以在jquery中使用.attr（）执行此操作。下面是工作片段



$（文档）.ready（函数（）{
$（“#htmlElement”）.attr（“类”、“常规类”）；
$（“#htmlElement”）.attr（“title”，“title…带空格！”）；
$（“#htmlElement”）.attr（“样式”，“颜色：红色；字体重量：粗体”）；
$（“#htmlElement”）.attr（“数据属性值”，true）；
});

HTML元素！
获取
属性str
并将其插入现有的
outerHTML
。要实现这一点，您需要通过删除现有标记、注入字符串和放回html的其余部分来重建节点


var attributesStr=”“；
attributesStr+=“class='regularClass'”；//需要处理键值属性。
attributesStr+=“title='title…带空格！'；”//和带有空格的属性。
attributesStr+=“style='color:red；font-weight:bold；”“；//和具有多个属性的样式。
attributesStr+=“数据属性值”；//和没有值的属性。
var元素=document.getElementById（'htmlElement'）；
var tag=element.tagName；
element.outerHTML='获取
属性str
并将其插入现有的
outerHTML
。要实现这一点，您需要通过删除现有标记、注入字符串和放回html的其余部分来重建节点


var attributesStr=”“；
attributesStr+=“class='regularClass'”；//需要处理键值属性。
attributesStr+=“title='title…带空格！'；”//和带有空格的属性。
attributesStr+=“style='color:red；font-weight:bold；”“；//和具有多个属性的样式。
attributesStr+=“数据属性值”；//和没有值的属性。
var元素=document.getElementById（'htmlElement'）；
var tag=element.tagName；
element.outerHTML='尝试以下操作：

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

var dummHTML=$（“”）；
$.each（dummHTML[0]。属性，函数（i，v）{
$（'htmlElement'）.attr（v.nodeName，v.nodeValue）；
});
试试这个：

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

var dummHTML=$（“”）；
$.each（dummHTML[0]。属性，函数（i，v）{
$（'htmlElement'）.attr（v.nodeName，v.nodeValue）；
});
可能不是最佳选项，但如果需要使用完整字符串：

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


var attributesStr=”“；
attributesStr+=“class='regularClass'”；//需要处理键值属性。
attributesStr+=“title='title…带空格！'；”//和带有空格的属性。
attributesStr+=“style='color:red；font-weight:bold；”“；//和具有多个属性的样式。
attributesStr+=“数据属性值”；//和没有值的属性。
//将属性添加到`#htmlElement`的特殊代码如下所示。
var$innerHTML=$（“#htmlElement”）.html（）
$（“#htmlElement”）.remove（）
var$newElement=”“+$innerHTML+“”
$（“正文”）。