如何在不使用'div.innerHTML = str;”的情況下安全地將 HTML 字串附加到 DOM？

在不使用div.innerHTML 的情況下將HTML 字串附加到DOM

使用div.innerHTML = str; 將HTML 字元;串附加到DOM;可能很方便，但由於安全漏洞而不鼓勵這樣做。更安全、更可靠的方法是使用 insertAdjacentHTML() 方法。

使用 insertAdjacentHTML()

insertAdjacentHTML() 提供了一種將 HTML 字串插入DOM。它需要兩個參數：

• position: 指定相對於目標元素插入 HTML 的位置。可以是「beforebegin」、「afterbegin」、「beforeend」或「afterend」。
• html: 要插入的 HTML 字串。

在您的在這種情況下，將提供的 HTML 字串附加到

中。透過 ID“test”，您可以使用以下程式碼：

<code class="javascript">const div = document.getElementById("test");
div.insertAdjacentHTML("beforeend", str);</code>

“beforeend”位置將在

的最後一個子元素之後插入 HTML。

瀏覽器相容性

所有現代瀏覽器都支援 insertAdjacentHTML()，包括 Chrome、Firefox、Safari 和 Edge。

現場示範

如需示範，請造訪以下 JSFiddle：http://jsfiddle.net/euQ5n/

以上是如何在不使用'div.innerHTML = str;”的情況下安全地將 HTML 字串附加到 DOM？的詳細內容。更多資訊請關注PHP中文網其他相關文章！