Question

I have a javascript function designed to dynamically append text to my document (and slides it down with JQuery). I create a new “p” element, and then I want to add text to it, but I need this text to have several formats. For example, I need the first part to be italicized, second part to be underlined, and third part to be white. As of now, I managed to get three different “div” elements with their own text nodes, each with their own style, but this makes it on three separate lines. I need it all on one line. Is there any way I can insert HTML tags into a text node, or somehow split the internal string up so I can style each part separately?

This code demonstrates the closest I got, but this puts each styled text node on different lines, and I need it all on one line in that p element:

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

Answer 1

Change the <div>s for <span>s, they’re displayed inline by default.

Alternatively you could apply a class to the <div> elements you create and set that class to display: inline-block; using CSS.