用 JS 插入 Html

Question

我需要插入div_A，div_B但仍保留div_A以供参考？var div_A = document.createElement('div');var newdiv = `<div class="div_B"> ${div_A.outerHTML} </div>`;$('.container').append(newdiv);  div_A.append('Hello');.container{  background-color:blue;  width:200px;  height:200px;}.div_B{ background-color:red;  width:150px;  height:150px;}.div_B div{ background-color:yellow;  width:100px;  height:100px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container"></div>

Answer 1

不是连接一个 HTML 字符串，而是让新div_B元素也是一个实际元素，而不仅仅是一个字符串：

var div_A = document.createElement('div');

var newdiv = $(`<div class="div_B" />`);

newdiv.append(div_A);

$('.container').append(newdiv);  

div_A.append('Hello');

.container{

  background-color:blue;

  width:200px;

  height:200px;

}

.div_B{

 background-color:red;

  width:150px;

  height:150px;

}

.div_B div{

 background-color:yellow;

  width:100px;

  height:100px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container"></div>

Answer 2

如果你想让对 div 的引用更新内容，你需要附加元素而不是使用元素的 HTML。该字符串是当时的快照。它不会做任何神奇的事情并不断更新。

所以创建 div，附加 div，现在你可以更新它了。

var div_A = document.createElement('div');

var newdiv = $('<div class="div_B"></div>');

newdiv.append(div_A);

$('.container').append(newdiv);  

div_A.append('Hello');

.container{

  background-color:blue;

  width:200px;

  height:200px;

}

.div_B{

 background-color:red;

  width:150px;

  height:150px;

}

.div_B div{

 background-color:yellow;

  width:100px;

  height:100px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container"></div>

Answer 3

需要使用这样的东西

var divb = document.createElement("div")

divb.InnerHtml = diva.OuterHtml

container.appendChild(divb)