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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 30, 2011 at 4:09 Greg Pettit 10.8k55 gold badges5757 silver badges7373 bronze badges asked Oct 30, 2011 at 1:48 SefuSefu 2,50488 gold badges4343 silver badges6060 bronze badges 1

• 1 Why are you using straight DOM if you have jQuery? – Félix Saparelli Commented Oct 30, 2011 at 3:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

Example

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

You want to create elements that display inline like <i>, <u> or <span>