用 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);&nbsp;&nbsp;div_A.append('Hello');.container{&nbsp; background-color:blue;&nbsp; width:200px;&nbsp; height:200px;}.div_B{&nbsp;background-color:red;&nbsp; width:150px;&nbsp; height:150px;}.div_B div{&nbsp;background-color:yellow;&nbsp; width:100px;&nbsp; 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);&nbsp;&nbsp;div_A.append('Hello');.container{&nbsp; background-color:blue;&nbsp; width:200px;&nbsp; height:200px;}.div_B{&nbsp;background-color:red;&nbsp; width:150px;&nbsp; height:150px;}.div_B div{&nbsp;background-color:yellow;&nbsp; width:100px;&nbsp; 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.OuterHtmlcontainer.appendChild(divb)