为通过 document.createElement 创建的 div 提供参数答案

【问题标题】：Give params to a div created via document.createElement为通过 document.createElement 创建的 div 提供参数
【发布时间】：2017-03-16 07:01:22
【问题描述】：

我想使用 for loop 创建多个 div，我就是这样做的

for(let i = 0; i < data.length; i++) {
  let divs = document.createElement('div');
  divs.className = 'button';
  divs.data-id = (data[i]).id;                  // error
  document.body.appendChild(divs);
}

现在我的问题是data-id 是必需的，但它会弹出一个错误。那么如何动态定义data-id

我也尝试将整个 div 作为另一个 div 的 innerHTML，但它不会呈现。那么如何解决呢？？

【问题讨论】：

看这个：stackoverflow.com/a/23899918/4964262

标签： javascript html node.js

【解决方案1】：

改用setAttribute()：

divs.setAttribute('data-id' , data[i].id);

另请注意，Javascript 标识符中不允许使用连字符，它们将被解析为减法。

【讨论】：

【解决方案2】：

您正在寻找divs.setAttribute('data-id', data[i].id);。

如果您尝试读取带有时髦字符（例如示例中的破折号）的属性，您可以使用括号而不是点符号来访问它，并像这样引用该属性：divs.attributes['data-id']

【讨论】：

【解决方案3】：

for(let i = 0; i < data.length; i++) {
  let divs = document.createElement('div');
  var attr = document.createAttribute('data-id');
  attr.value = (data[i]).id;
  divs.setAttributeNode(attr);
  document.body.appendChild(divs);
}

【讨论】：

【解决方案4】：

这应该可行：

for(let i = 0; i < data.length; i++) {
  let divs = document.createElement('div');
  divs.setAttribute("id", "btn_id");
  divs.setAttribute("class", "btn_class");
  divs.setAttribute("data-id", (data[i]).id);
  document.body.appendChild(divs);
}

或使用 Jquery 替代方案：

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})

【讨论】：