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

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

本文关键字：DOM HTML 内容 创建 元素 新创建 何设置 设置      更新时间：2023-09-26

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

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

既然你提到你可能写了不止一次，并且不想覆盖现有的数据，你可以使用.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);
相关文章：