Insert Html with JS

Question

I need to insert div_A into div_B, but still keep div_A for reference ?

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>

Thank you for any suggestions

• epascarello: So do not use it as a string which defeats the purpose of the reference
• Hackinet: I don't understand the downvote to this question. The user added his approach and minimal reproducible code. The user posted the question because he is stuck and wants to learn/understand something.

Answer 1

Rather than concatenating an HTML string, have the new div_B element be an actual element too, not just a string:

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>

• Pypix: What if I want to insert div_A into a div that is nested inside div_B?
• CertainPerformance: Then you would do the same sort of thing - explicitly create each element you want, and append children to them while keeping a reference to the children.

Answer 2

If you want to have the reference to the div update the content, you will need to append the element and not use the HTML of the element. The string is a snapshot at that time. It will not do anything magical and keep updating.

So create the div, append the div, and now you can update it.

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>

• Pypix: Thank you, I need to insert div_A into a div that is nested inside div_B?

Answer 3

need to use somthing like this

var divb = document.createElement("div")
divb.InnerHtml = diva.OuterHtml
container.appendChild(divb)