Как применить div, вставленный в другой div, ко всем элементам с одинаковым именем класса - PullRequest
0 голосов
/ 29 мая 2019

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

<div class="section" id="section1">
  <div id="myDIV"> --> I want to wrap this into a new div
   asdasd
  </div>
</div>

<div class="section" id="section1">
 <div id="myDIV">
  cbcvbcvb
 </div>
</div>

<script>
//org_html = document.getElementById("section1").innerHTML;
//new_html = "<div class='mydiv-container'>" + org_html + "</div>";
//document.getElementById("section1").innerHTML = new_html;

const parentObject = document.getElementById('section1').innerHTML;

[...parentObject].forEach((parent, i) => {
  //const childElement = document.createElement('div');
  const childElement = "<div class='slidesInner'>" + parentObject + </div>";
  document.getElementById("section1").innerHTML = childElement;

});
</script>

Результат должен быть таким:

 <div class="section" id="section1">
  <div class="mydiv-container">
   <div id="myDIV">
    cbcvbcvb
   </div>
  </div>
</div>

<div class="section" id="section1">
 <div class="mydiv-container"> <-- this is not showing in the second section
  <div id="myDIV">
   cbcvbcvb
  </div>
 </div>
</div>

1 Ответ

2 голосов
/ 29 мая 2019

Сначала здесь опечатка "<div class='slidesInner'>" + parentObject + </div>";. Вы видите, что закрытие </div>" не имеет открывающей котировки ".

Во-вторых, вам не нужно перебирать содержимое innerHTML. Так как innerHTML выдаст содержимое как <div id="myDIV">asdasd</div>. Вы можете получить это с помощью querySelectorAll и использовать литералы шаблона для создания нового div-оболочки и установить innerHTML

const parentObject = document.querySelectorAll('.section');
parentObject.forEach(function(item, index) {
  item.innerHTML = `<div class='slidesInner' id='subSection_${index}'>${item.innerHTML}</div>`;
})
.slidesInner {
  color: green;
}
<div class="section" id="section1">
  <div id="myDIV">
    asdasd
  </div>
</div>

<div class="section" id="section2">
  <div id="myDIV2">
    cbcvbcvb
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...