Как применить div, вставленный в другой div, ко всем элементам с одинаковым именем класса
Я хочу вставить или обернуть свой второй 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>
то есть вы имеете в виду, что я создам код #section1, а затем разделю для #section2 с тем же именем класса, вставленным как mydiv-container?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Во-первых, здесь опечатка "<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>извините за опечатку, ваш код дает мне циклы для class = "slidesInner" и он зацикливается только в первом разделе, я только хочу, чтобы class = "myDIV" был одним и тем же классом во всех разделах, которые я хочу добавить. например, id=section1, id=section2, id=section3, внутренний будет class=myDIV, только не числом. ценю твою помощь. Спасибо
Привет, есть ли у вас другой способ решить эту проблему? помощь будет очень признательна. Спасибо
Вы не можете повторять идентификаторы. Вы не выбираете по классу, вы выбираете по идентификатору, и, как я уже сказал, они должны быть уникальный для каждого раздела.