javascript - 如何使用 JavaScript 更改 CreateTextNode 的样式

Question

今天早上我在编写一个简单的联系人管理器，我发现我无法在 JavaScript 中更改文本的样式！问题 ：

function addcontact() {
    var ul = document.getElementById("list");
    var firstname = document.getElementById("input_firstname");
        var lastname = document.getElementById("input_lastname");
    var li = document.createElement("li");
    li.setAttribute('id',firstname.value);
    li.appendChild(document.createTextNode("Firstname:" + firstname.value + ", Lastname: " + lastname.value ));
    ul.appendChild(li);
}

li.appendChild(document.createTextNode("Firstname:" + firstname.value + ", Lastname: " + lastname.value ));

在这一行中，我无法更改 "Firstname:" 的样式。我尝试添加一些标签，但什么也没发生！

我怎么解决这个问题？

标签： javascripthtmlcssdom

Answer 1

document.createTextNode创建一个没有样式的文本节点。要为某些文本添加样式，您需要添加一个可以具有style属性的元素，例如<span>.

而不是使用

li.appendChild(document.createTextNode("Firstname:" + firstname.value + ", Lastname: " + lastname.value ));

您可以采用另一个元素，例如跨度。

var span = document.createElement('span');
span.style = ...; // apply your style
span.appendChild(document.createTextNode("Firstname: "));
li.appendChild(span);
li.appendChild(document.createTextNode(firstname.value + ", Lastname: " + lastname.value));
ul.appendChild(li);