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（“名字：” +名字。值 +“，Lastname：” + lastname.value））;

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

我该如何解决这个问题？

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

如何使用JavaScript更改CreateTextNode的样式

1 个答案: