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プロパティを使用します。その名前が示すように、前者は HTML を処理し、後者はプレーン テキストを処理します (したがって、挿入された HTML はエスケープされるため、たとえば XSS を防止したい場合に役立ちます)。newParagraphtextContent

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 に答える