如何使用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））;

在这一行中我无法改变“名字：”的风格。我试图添加一些标签，但什么也没发生！

我怎么解决这个问题？

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