How to set the HTML content of a newly created DOM element?

Question

I am trying to write to the document in this manner. The reason I am not using document.getElementById("holder").innerHTML="x" is because there is a chance I will be writing more than once, and dont want anything to be overwritten. The problem with this method, however, is the text content is taken as a literal string, when I want the tags I have included in the string to work. How should I change this code to get the tags to display on the document correctly?

if (office1match == matchindex[0]) {
    var newParagraph = document.createElement('article');
    newParagraph.textContent = "<p class=\"title\">Core i.1.1</p><img class=\"caseimg\" src=\"images\\case1.png\"><p><span class=\"bold\">Motherboard:</span> ASRock H61M/U3S3 LGA 1155 Intel H61</br><span class=\"bold\">Processor:</span> Intel Celeron G550 Sandy Bridge 2.6GHz LGA 1155 65W</br><span class=\"bold\">Video Card:</span> On Board</br><span class=\"bold\">Memory:</span> Crucial 2GB (2 x 1GB) 240-Pin DDR3 SDRAM DDR3 1333</br><span class=\"bold\">DVD Burner:</span> ASUS 24X DVD Burner</br><span class=\"bold\">Hard Drive:</span> Western Digital Caviar Blue WD2500AAKX 250GB 7200 RPM</br><span class=\"bold\">Case:</span> Rosewill R363-M-BK Black Ultra High Gloss Finished MicroATX</br><span class=\"bold\">OS:</span> Microsoft Windows 7 Home Premium</br><span class=\"bold\">Cost:</span> $430.00</p>";
    document.getElementById("holder").appendChild(newParagraph);
}

Answer 1

Use the innerHTML property of newParagraph instead of textContent . As their name implies, the former deals with HTML while the latter deals with plain text (so inserted HTML is escaped, which is useful when you want to prevent XSS for example).

newParagraph.innerHTML = "<p class=\"title\">Core i.1.1</p><img class=\"caseimg\" src=\"images\\case1.png\"><p><span class=\"bold\">Motherboard:</span> ASRock H61M/U3S3 LGA 1155 Intel H61</br><span class=\"bold\">Processor:</span> Intel Celeron G550 Sandy Bridge 2.6GHz LGA 1155 65W</br><span class=\"bold\">Video Card:</span> On Board</br><span class=\"bold\">Memory:</span> Crucial 2GB (2 x 1GB) 240-Pin DDR3 SDRAM DDR3 1333</br><span class=\"bold\">DVD Burner:</span> ASUS 24X DVD Burner</br><span class=\"bold\">Hard Drive:</span> Western Digital Caviar Blue WD2500AAKX 250GB 7200 RPM</br><span class=\"bold\">Case:</span> Rosewill R363-M-BK Black Ultra High Gloss Finished MicroATX</br><span class=\"bold\">OS:</span> Microsoft Windows 7 Home Premium</br><span class=\"bold\">Cost:</span> $430.00</p>";

jsFiddle Demo

Answer 2

Since you mentioned you might be writing more than once, and don't want to overwrite the existing data you can use .insertAdjacentHTML() . Pro tip: if you use single quotes to enclose your stings, you don't have to slash-escape your double quotes in your strings.

Demo: http://jsfiddle.net/ThinkingStiff/myzjn/

Script:

var newParagraph = document.createElement('article');
newParagraph.insertAdjacentHTML( 'beforeEnd', '<p class="title">Core i.1.1</p><img class="caseimg" src="images\case1.png"><p><span class="bold">Motherboard:</span> ASRock H61M/U3S3 LGA 1155 Intel H61</br><span class="bold">Processor:</span> Intel Celeron G550 Sandy Bridge 2.6GHz LGA 1155 65W</br><span class="bold">Video Card:</span> On Board</br><span class="bold">Memory:</span> Crucial 2GB (2 x 1GB) 240-Pin DDR3 SDRAM DDR3 1333</br><span class="bold">DVD Burner:</span> ASUS 24X DVD Burner</br><span class="bold">Hard Drive:</span> Western Digital Caviar Blue WD2500AAKX 250GB 7200 RPM</br><span class="bold">Case:</span> Rosewill R363-M-BK Black Ultra High Gloss Finished MicroATX</br><span class="bold">OS:</span> Microsoft Windows 7 Home Premium</br><span class="bold">Cost:</span> $430.00</p>' );
document.body.appendChild(newParagraph);