如何设置新创建的DOM元素的HTML内容？

Question

我试图以这种方式写入文档。 我没有使用document.getElementById("holder").innerHTML="x"的原因是因为我有可能不止一次写，并且不想要任何东西被覆盖。 但是，当我希望包含在字符串中的标记起作用时，此方法的问题是文本内容被视为文字字符串。 我应该如何更改此代码以使标签正确显示在文档上？

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

使用newParagraph的innerHTML属性而不是textContent 。 顾名思义，前者处理HTML而后者处理纯文本（因此插入的HTML会被转义，这在您想要阻止XSS时非常有用）。

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演示

Answer 2

由于您提到您可能不止一次写，并且不想覆盖现有数据，您可以使用.insertAdjacentHTML() 。 专业提示：如果你使用单引号括起你的叮咬，你不必在字符串中斜线转义双引号。

演示： http ： //jsfiddle.net/ThinkingStiff/myzjn/

脚本：

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