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

您可以采用另一個元素，例如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);