如何设置新创建的 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

由于您提到您可能不止一次写入，并且不想覆盖现有数据，您可以使用.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);

Answer 2

使用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 Demo