XHTML / JavaScript dynamic content not formatted

Question

Facing a very interesting problem...

I use Javascript and xml to load dynamic content into my site. Inside the xml file, I include the formatting tags like <b>This is some bold text</b> <--note: in my xml escape characters are used, but I cannot show that on this page since they show up as the less than and greater than symbols!

This works perfectly fine when I load content into an element that has an ID on my html page, but when I create an element with Javascript, then load the xml content, the content in the dynamic element is not formatted, and I am able to see the html tags on the page. Code snippets are below...

populates content into an html element with an ID (formatted properly in browser)

    var paragraph = xmlDOM.getElementsByTagName("Overview")[0].childNodes[0].nodeValue;
    document.getElementById("Paragraph").innerHTML = paragraph;

Populates content into a dynamic element (html tags show up in the paragraph in browser)

   var paragraph = document.createElement('p');
   paragraph.appendChild(document.createTextNode(sections[i].childNodes[1].firstChild.nodeValue));

I'm stumped on this one. Please let me know if more info is needed.

Answer 1

You're using createTextNode() method. This outputs the string as non-HTML (plain-Text). You can use innerHTML on the dynamic paragraph element and fill it with HTML content which gets rendered normally.

Example here: http://jsfiddle.net/gpsaL/1/

var paragraph = document.createElement('p');
paragraph.innerHTML = sections[i].childNodes[1].firstChild.nodeValue;

Hope this helps!