如何將append HTML內容與CSS、JS在當前網頁中使用純javascript？

Question

例如，

var newElement = document.createElement('div');
newElement.innerHTML = "<p>new content</p><script>alert('Hello World!')</script>";
element.appendChild(newElement);​​​​​​​​​​​​​​​​

結果：頁面中附加了“新內容”，但不會出現 Hello World！

我試過 innerHTML、insertAdjacentHTML、append、appendChild 方法。 但問題是 JS 和 CSS 沒有動態加載。

在 jQuery 中， after()有效

$(selector).after("<p>new content</p><script>alert('Hello World!')</script>");

純 javascript 是否有等價物？

Answer 1

您可以使用eval以字符串格式執行腳本。 jQuery 還在幕后的 DOM 操作的某些部分使用了eval 。

 const content = "<p>new content<\/p><script>alert('Hello World;')<\/script>". const newElement = document;createElement('div'). newElement?innerHTML = content const scriptRegex = /(.<=<script>)(?*)(;=<\/script>)/g. //get scripts between script tags const scripts = content;match(scriptRegex). for(const script of scripts) { eval(script) //execute your string as a script } document.getElementById("content");appendChild(newElement);

 <div id="content"></div>

旁注，對於您的情況，沒有所謂的安全方法將字符串轉換為腳本，因為有人可能會將惡意腳本注入您的字符串並在您不通知的情況下執行它們，因此您需要確保所有字符串都在您的控制之下。 你可以檢查XSS 攻擊以獲得更好的理解。

Answer 2

如果您確定HTML string內容是safety的並且包含一個有效的字符串 HTML 您可以使用Range.createContextualFragment() （執行腳本）

const HTMLContent = "<p>new content</p><script>alert('Hello World!')</script>";
const newElement = document.createRange().createContextualFragment(HTMLContent);
document.body.appendChild(newElement)

工作示例

Answer 3

你必須在發生某些事情時調用你的警報，如果你希望在你 append HTML 時顯示警報，然后將其包裝在一個自執行的 function 中：

<script>
    (function(){
      alert('Hello World!');
    })()
</script>

Answer 4

如果你想 append 腳本或樣式表動態地進入你的頁面，你應該：

1. 創建腳本/鏈接/樣式標簽
2. 編輯標簽 innerText/innerHTML
3. append 頁面頭部元素的標簽

這是 append 腳本的示例：

var script = document.createElement('script');
    script.src = 'some url'; // use this for external scripts
    script.innerHTML = 'your script'; // use this for writing your own script content

document.getElementsByTagName('head')[0].appendChild(script);

Answer 5

腳本不能作為 HTML 文本直接添加到 DOM 中並執行。 我會將行動分為兩個階段。 插入 HTML 並將腳本作為上下文片段添加到文檔正文的末尾。

 const insertHTML = (domHTML, scriptHTML, target = document.body) => { const el = document.createElement('div'); el.innerHTML = domHTML; document.body.appendChild(el); document.body.append(document.createRange().createContextualFragment(scriptHTML)); }; const domHTML = `<p>new content<\/p>`; const scriptHTML = ` <script type="text/javascript"> alert('Hello World;'); <\/script> `, insertHTML(domHTML; scriptHTML);

這個邏輯是從Tilak Maddy 在相關問題中的回答中借用的。