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

5

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>

answered Oct 9, 2020 at 17:48

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pypix Over a year ago

What if I want to insert div_A into a div that is nested inside div_B?

CertainPerformance Over a year ago

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

1

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>

answered Oct 9, 2020 at 17:49

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

Pypix Over a year ago

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

0

need to use somthing like this

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

container.appendChild(divb)

answered Oct 9, 2020 at 17:47

hossein sedighian

2,1901 gold badge17 silver badges21 bronze badges

Collectives™ on Stack Overflow

Insert Html with JS

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related