Question

所以我有一个存储为字符串变量的属性列表。我想将该变量添加到<div>。我现在不知所措。我所拥有的如下：

HTML：

<div></div>

JS：

var attributes = 'data-id="123" data-type="content" data-order="1"'

期望的输出：

<div data-id="123" data-type="content" data-order="1"></div>

Answer 1

用空格分隔attributes字符串（但不是引号内的空格）

var div = document.getElementById('test');
var attributes = 'data-id="123" data-type="content new" data-order="1"';
var arr = attributes.match(/[^\s="']+|"([^"]*)"|'([^']*)'/g);

for (var i = 0; i < arr.length; i += 2)
  div.setAttribute(arr[i], arr[i + 1].replace(/"/g, ''));

<div id="test">test</div>

Answer 2

这应该有用。

var div = document.getElementById('YOUR_ID');
var attributes = 'data-id="123" data-type="content" data-order="1"'
attributes.split(' ').forEach((attr) => {
   div.setAttribute(attr.split('=')[0], attr.split('=')[1]);
});

Answer 3

您可以使用split()拆分键值属性，然后使用forEach()循环将它们添加到元素中。

var attributes = 'data-id="123" data-type="content" data-order="1"'.replace(/"/g, '').split(/=| /)
attributes.forEach(function(e, i) {
  if(i % 2 == 0) $('div').attr(attributes[i], attributes[i + 1])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>DIv</div>

Answer 4

var attributes = 'data-id="123" data-type="content" data-order="1"';
 attributes=attributes.split(" ");
i=0;
var d=document.getElementsByTagName('div')[0];
while (i<attributes.length){
d.setAttribute(attributes[i].split('=')[0],attributes[i].split('=')[1].replace(/\"/g,""));
i++;
}

alert(d.getAttribute("data-id"));

在jQuery中将属性作为String添加到DOM元素

4 个答案: