首頁 > web前端 > js教程 > 如何在不使用'div.innerHTML = str;”的情況下安全地將 HTML 字串附加到 DOM?

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

Mary-Kate Olsen
發布: 2024-11-05 07:13:02
原創
1008 人瀏覽過

How to Safely Append HTML Strings to the DOM Without Using `div.innerHTML  = str;`?

在不使用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板