title: How can I append new "p" element with formatted text
body: <p>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?</p>
  
  <p>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:</p>
  
  <pre><code>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");
  }
  </code></pre>