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

So do not use it as a string which defeats the purpose of the reference — epascarello
– epascarello, Commented Oct 9, 2020 at 17:47
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. — Hackinet
– Hackinet, Commented Oct 9, 2020 at 17:52

CertainPerformance · Accepted Answer · 2020-10-09 17:48:11Z

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>

What if I want to insert div_A into a div that is nested inside div_B?
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.

epascarello · Accepted Answer · 2020-10-09 17:49:43Z

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>

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

hossein sedighian · Accepted Answer · 2020-10-09 17:47:50Z

need to use somthing like this

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

Collectives™ on Stack Overflow

Insert Html with JS

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related