Append HTML 來自使用普通 javascript 的 XHR 請求

Question

如果我有這樣的 HTML 內容：

<div id="my1">
    <div id="1">This is div 1</div> 
    <div id="2">This is div 2</div> 
    <div id="3">This is div 3</div> 
    <div id="4">This is div 4</div> 
    <div id="5">This is div 5</div> 
</div>

我怎樣才能 append 從 XHR 請求返回的 HTML 字符串，如下所示：

<div class="cA cB cC" data-type"a">
    <div>Success Message Here<div>
    <div class="cL">Undo</div>
</div>

所以最終的結果是：

<div id="my1">
    <div id="1">This is div 1</div> 
    <div id="2">This is div 2</div> 
    <div id="3">This is div 3</div> 
    <div id="4">This is div 4</div> 
    <div id="5">This is div 5</div>
    <div class="cA cB cC" data-type"a">
       <div>Success Message Here<div>
       <div class="cL">Undo</div>
    </div>
</div>

問題是，我不想做document.createElement(div).appendChild()因為它已經格式化了類和數據屬性。

有沒有辦法簡單地將這個 HTML 添加到我需要的地方？

Answer 1

您可以 append 到 div 的 innerHTML。 假設您要添加的內容存儲在名為html的變量中：

document.getElementById('my1').innerHTML += html

Answer 2

首先你必須確保數據是安全的，才能直接插入以防止 XSS。 然后您可以使用名為 insertAdjacentHTML 的方法： https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML您可以選擇插入原始 HTML 的位置

element.insertAdjacentHTML('beforeend', rawHtml)