Как я могу изменить стиль CreateTextNode с помощью JavaScript

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 + ", Фамилия:" + фамилия.значение));

В этой строке я не могу изменить стиль «Имя:». Я пытался добавить некоторые теги, но ничего не произошло!

Как я могу решить эту проблему?

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