Question

我有一个JS函数，可以在更改变量时更新产品说明。这是元素更新的地方。

A   35  74  dsadasd/1   0   +
A   95  74  dsadasd/2   0   -
B   78  852 dsadasd/1   0   -
B   75  159 dsadasd/2   0   +
C   12  789 dsadasd/1   0   +
C   91  546 dsadasd/2   0   -
A   52  15  dsadasd/1   0   - 
A   87  52  dsadasd/2   0   +

效果很好，但希望将输出包装在div中。有谁知道在更新标签之前将innerHTML包裹在标签中的方法吗？

谢谢。

Answer 1

如果您只是在设置文字，请不要使用innerHTML。它是非常不安全的，可以愉快地执行脚本并与您使用的文本可以通过简单地包含一些恶意HTML代码来指示浏览器执行操作的任何服务器联系。

改为使用.textContent属性。

但是更好的是，因为看起来您无论如何都在使用jQuery，所以只需使用jQuery的内置方法即可根据需要构造元素：

let div = $(`<div>${description}</div>`);
$(`.my-element`).append(div);

如果已经有元素：

let update = $(`<div>${description}</div>`);
$(`#your.query-selector goes:here()`).empty().append(update);

（因为jQuery允许您以某种方式将调用链接到选择中的每个元素，这会将div包装的描述设置为查询结果中每个元素的内容）

Answer 2

我不知道您的$$函数来自什么，但是我在Vanilla JS中有建议：

const descriptionText = "my short description";
const descriptionElements = document.querySelectorAll('#product_addtocart_form div.short-description');

Array.from(descriptionElements).forEach(function(el) {
  const newDiv = document.createElement('div');
  newDiv.classList.add('customDiv');
  newDiv.textContent = descriptionText;
  el.appendChild(newDiv);
});

div {
  border: 1px dotted silver;
  padding: .5em;
  margin: .25em;
}

<div id="product_addtocart_form">
  <div class="short-description">1</div>
  <div class="short-description">2</div>
  <div class="short-description">3</div>
</div>

编辑：

阅读您的第一条评论后，只需在代码中替换：

  el.innerHTML = shortDescription;

作者：

  const descWrapper = document.createElement('div');
  descWrapper.innerHTML = shortDescription;
  el.appendChild(descWrapper);

将innerHTML包装在div中

2 个答案: