填充元素内容的干净方法

Clean way to populate content of element

本文关键字：方法 元素 填充      更新时间：2023-09-26

我需要将内容（HTML）附加到元素。这就是我目前的做法...

element.innerHTML += "<a href='"" + something[awesome] + "'">" + something[great] + "</a>";
element.innerHTML += "<br>";

这似乎很混乱。有没有更清洁的方法可以做到这一点？createElement()方法是实现这一目标的正确方法吗？

假设已经定义了element、something、awesome 和great，我通常会做这样的事情：

// build anchor
var anchorElement = document.createElement('a');
anchorElement.href = something[awesome];
anchorElement.appendChild(document.createTextNode(something[great]));
// build break tag
var breakElement = document.createElement('br');
// append
element.appendChild(anchorElement);
element.appendChild(breakElement);

休息可能是不必要的。 只需使用 CSS 制作锚块或创建视觉分隔即可。

这里有一个小提琴可以玩：https://jsfiddle.net/30qvd2vm/

这取决于您的要求，但如果您想保持简单并接近您现在拥有的内容，只需更改为：

var s = "<a href='"" + something[awesome] + "'">" + something[great] + "</a>";
element.innerHTML += s + "<br>";

用语言来说，在变量中构建字符串，而不是直接在 innerHTML 属性上构建字符串。

相关文章：