javascript - 分隔段落列表并为每个单词提供单独的 CSS

Question

我有一个包含用户生成内容的段落。该段落是一个列表，其中包含以逗号分隔的单词。例如“狗、猫、仓鼠、乌龟”。我希望将此列表分开，以便可以为每个单词分配其自己的属性。

Image example

如我上面的示例，而不是具有共享边框和颜色的列表。我希望它们有自己的“非连接”边框，它们之间有间距。这可能吗？

Answer 1

这是一种方法(尽管下次尝试自己取得一些进展):

DEMO

如果这是你的 html:

<p id="example">dog, cat, hamster, turtle</p>

你的代码:

function seperateList() {
    var el =  document.getElementById("example");
    var array = el.innerHTML.split(",");
    
    el.innerHTML = "";
    for (var i =0; i<array.length;i++) {
        var _newa = document.createElement("span");
        var _a = array[i].trim();
            _newa.innerHTML= _a;
            el.appendChild(_newa);
    }
}

seperateList();

CSS:

#example span { padding:2px 5px; background:#e3e3e3; margin:0 5px; border-radius:6px;}

• 请注意，您当然可以将元素作为参数传递给函数。 如果您有任何问题，请随时……祝您好运!