Блог

У меня есть функция javascript, предназначенная для динамического добавления текста в мой документ (и сдвигает его вниз с помощью jQuery). Я создаю новый элемент «p», а затем хочу добавить к нему текст, но мне нужно, чтобы этот текст имел несколько форматов. Например, мне нужно, чтобы первая часть была выделена курсивом, вторая часть была подчеркнута, а третья часть была белой. На данный момент мне удалось получить три разных элемента «div» с их собственными текстовыми узлами, каждый со своим собственным стилем, но это делает его на трех отдельных строках. Мне нужно все это в одной строке. Могу ли я каким-либо образом вставить HTML-теги в текстовый узел или каким-либо образом разделить внутреннюю строку, чтобы я мог стилизовать каждую часть отдельно?

Этот код демонстрирует самое близкое, что у меня есть, но это помещает каждый стилизованный текстовый узел в разные строки, и мне нужно все это в одной строке в этом элементе p:

 function append_announcement(time_string, user_by, text){
    newp = document.createElement("p");

    head = document.createElement("span");
    headt = document.createTextNode("You wrote: ");
    head.appendChild(headt);

    body = document.createElement("div");
    bodyt = document.createTextNode(text);
    body.appendChild(bodyt);
    body.setAttribute("style", "color: white");

    foot = document.createElement("div");
    foott = document.createTextNode("Done.");
    foot.appendChild(foott);

    newp.appendChild(head);
    newp.appendChild(body);
    newp.appendChild(foot);
    newp.setAttribute("align", "center");
    newp.style.display = "none";
    document.getElementById("announcement_posts").insertBefore(newp,
        document.getElementById("announcement_posts").firstChild);
    $("p").slideDown("slow");
}
 

Измените <div> s на <span> s, по умолчанию они отображаются в строке.

В качестве альтернативы вы можете применить класс к <div> создаваемым вами элементам и установить для этого класса значение с display: inline-block; помощью CSS.

Пример

 function append_announcement(time_string, user_by, text){
    newp = document.createElement("p");

    var i = document.createElement("i");
    i.textContent = ("You wrote ");

    var span = document.createElement("span");
    span.textContent = text;
    span.style.color = "white";

    var u = document.createElement("u");
    u.textContent = " Done.";

    newp.appendChild(i);
    newp.appendChild(span);
    newp.appendChild(u);
    newp.setAttribute("align", "center");
    newp.style.display = "none";
    document.getElementById("announcement_posts").insertBefore(newp,
        document.getElementById("announcement_posts").firstChild);
    $("p").slideDown("slow");
}
 

Вы хотите создавать элементы, которые отображают встроенные, например <i> , <u> или <span>