Вставка Html с помощью JS

#javascript

Вопрос:

Мне нужно вставить div_A в div_B , но все равно сохранить div_A для справки ?

 var div_A = document.createElement('div');  var newdiv = `lt;div class="div_B"gt; ${div_A.outerHTML} lt;/divgt;`;  $('.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; }

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt;  lt;div class="container"gt;lt;/divgt;

Спасибо за любые предложения

1. Поэтому не используйте его как строку, которая противоречит цели ссылки

2. Я не понимаю, как ответить на этот вопрос. Пользователь добавил свой подход и минимальный воспроизводимый код. Пользователь опубликовал вопрос, потому что он застрял и хочет что-то узнать/понять.

Ответ №1:

Вместо объединения строки HTML, пусть новый div_B элемент также будет фактическим элементом, а не просто строкой:

 var div_A = document.createElement('div');  var newdiv = $(`lt;div class="div_B" /gt;`); 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; }

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt;  lt;div class="container"gt;lt;/divgt;

1. Что делать, если я хочу вставить div_A в div, который вложен внутри div_B ?

2. Затем вы бы сделали то же самое — явно создали каждый нужный вам элемент и добавили к ним дочерние элементы, сохраняя ссылку на них.

Ответ №2:

Если вы хотите, чтобы ссылка на div обновила содержимое, вам нужно будет добавить элемент, а не использовать HTML элемента. Строка в это время является моментальным снимком. Он не будет делать ничего волшебного и будет постоянно обновляться.

Поэтому создайте div, добавьте div, и теперь вы можете его обновить.

 var div_A = document.createElement('div');  var newdiv = $('lt;div class="div_B"gt;lt;/divgt;'); 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; }

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt;  lt;div class="container"gt;lt;/divgt;

Ответ №3:

нужно использовать что-то вроде этого

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