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: "的样式。我试图添加一些标签，但没有任何反应!

我该如何解决这个问题？

Answer 1

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

而不是使用

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

您可以采用其他元素，例如 span。

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);