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)