4

我正在尝试以这种方式写入文档。我不使用的原因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);
}
4

2 回答 2

4

使用innerHTML属性 ofnewParagraph而不是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 演示

于 2012-07-06T15:47:58.210 回答
0

由于您提到您可能不止一次编写，并且不想覆盖您可以使用的现有数据.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);
于 2012-07-09T07:12:28.190 回答