Как корректно обернуть контент в div при помощи js?

Question

Пытаюсь написать скрипт, который:

Находит все теги blockquote на странице
Первый тег внутри каждого blockquote делает кнопкой, по щелчку на которую скрывается/отображается контент внутри blockquote.
Все элементы, идущие после первого, оборачивает в div, который будет скрываться отображаться по щелчку.

Проблема в следующем:

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

Пример скрипта ниже. Комментарии писал больше для себя, чтобы не запутаться, но может быть кому-то поможет.

Мой скрипт:

//создаю переменную elements которая принимает значение коллекции всех элементов с тегом blockquote на странице
var elements = document.getElementsByTagName('blockquote')
//запускаю цикл для каждого элемента коллекции elements от 0 до i                              
for (var i = 0; i < elements.length; i++) {
    //внутри цикла запускаю функцию
    (function (i) {
        //создаю новый div        
        var div = document.createElement('div');
        //помещаю div в elements[i]                                   
        elements[i].appendChild(div);
        //присваиваю id container-i                                               
        div.id = ('container-' + i);
        //нахожу все теги внутри elements[i] и помещаю их в переменную content                                               
        var content = elements[i].getElementsByTagName('*');
        //элементы content от 1 до i помещаю внутрь созданного div                              
        for (var i = 1; i < content.length; i++) {
            div.appendChild(content[i]);
        };
        //создаю переменную btnCollapse из нулевого элемента коллекции content и крашу ее в красный цвет   
        var btnCollapse = content[0];
        btnCollapse.style.color = 'red';
        //по нажатию на btnCollapse срабатывает функция которая скрывает/раскрывает div    
        btnCollapse.onclick = function () {
            div.style.display === 'none' ? div.style.display = 'block' : div.style.display = 'none';
        };
    })(i);
}

html на входе:

<blockquote>
    <h2>Модификации...</h2>
    <h3>Модификации</h3>
    <p>Сканер...</p>
    <div id="gallery-4" class="gallery galleryid-59 gallery-columns-2 gallery-size-large">
        <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45"><img width="785"
                        height="508" src="..." class="attachment-large size-large" alt=""
                        aria-describedby="gallery-4-1243" srcset="..." sizes="(max-width: 785px) 100vw, 785px"></a>
            </div>
            <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1243">
                ДС...
            </figcaption>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45М"><img
                        width="785" height="508" src="..." class="attachment-large size-large" alt=""
                        aria-describedby="----" sizes="(max-width: 785px) 100vw, 785px"></a>
            </div>
            <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1242">
                ДС...
            </figcaption>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45"><img width="785"
                        height="508" src="..." class="attachment-large size-large" alt=""
                        aria-describedby="gallery-4-1241" srcset="..." sizes="(max-width: 785px) 100vw, 785px"></a>
            </div>
            <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1241">
                ДС-45
            </figcaption>
        </figure>
        <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45М"><img
                        width="785" height="508" src="..." class="attachment-large size-large" alt=""
                        aria-describedby="gallery-4-1244" srcset="..." sizes="(max-width: 785px) 100vw, 785px"></a>
            </div>
            <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1244">
                ДС-45М
            </figcaption>
        </figure>
    </div>

    <p>На монитор...</p>
    <p>Автономная...</p>
    <p><img class="alignnone size-full wp-image-114" src="..." alt="" width="900" height="500" srcset="..."
            sizes="(max-width: 900px) 100vw, 900px"></p>
    <p style="text-align: center; padding-top: 1em;"><a href="..." class="head__btn_first">Рассчитать...</a> <a
            href="..." class="head__btn_second">Демонстрация</a></p>
    <h3>Структурная...</h3>
    <p>Сканер...<a href="...">Живой сканер</a>:</p>
    <ul>
        <li>самостоятельно в <a href="...">Настольных...</a></li>
        <li>в составе <a href="...">Дактилоскопических...</a></li>
        <li>в составе <a href="...">Мобильного...</a></li>
    </ul>
    <p>
        <a href="..." data-lbwps-width="637" data-lbwps-height="334"><img class="alignnone size-full wp-image-131"
                src="..." alt="" width="777" height="292"></a>
    </p>
    <h3>Характеристики</h3>
    <p><a href="/wp-content/uploads/DS_45_datasheet.pdf">Cпецификаци...</a>(PDF 1Mb)</p>
    <p><strong>Формируемые...</strong> прокатанные...</p>
    <ul>
        <li>Время...</li>
        <li>Время...</li>
        <li>Область...</li>
        <li>Размер...</li>
        <li>Размер...</li>
        <li>Разрешение...</li>
        <li>Динамический...</li>
        <li>Отношение...</li>
        <li>Интерфейс...</li>
        <li>Требуемый...</li>
    </ul>
    <p><strong>ДС-45:</strong></p>
    <ul>
        <li>Электропитание...</li>
        <li>Мощность...</li>
        <li>Размеры...</li>
        <li>Вес...</li>
    </ul>
    <p><strong>ДС-45М:</strong></p>
    <ul>
        <li>Электропитание...</li>
        <li>Мощность...</li>
        <li>Размеры...</li>
        <li>Вес...</li>
    </ul>
    <p style="text-align: center; padding-top: 1em;">
        <a href="..." class="head__btn_first">Рассчитать...</a> 
        <a href="..." class="head__btn_second">Демонстрация</a></p>
</blockquote>

html на выходе:

<blockquote>
    <h2 style="color: red;">Модификации...</h2>
    <p>Сканер выпускается ...</p>
    <p>На монитор ...</p>
    <p style="text-align: center;"> <a href="..." class="head__btn_second">Демонстрация</a></p>
    <p>Сканер...</p>
    <ul>
        <li>в составе </li>
        <li>в составе </li>
    </ul>
    <p> (PDF 1Mb)</p>
    <p> прокатанные изображения ...</p>
    <ul>
        <li>Время ...</li>
        <li>Размер ...</li>
        <li>Разрешение...</li>
        <li>Отношение...</li>
        <li>Требуемый...</li>
    </ul>
    <ul>
        <li>Мощность...</li>
        <li>...</li>
    </ul>
    <ul>
        <li>Мощность...</li>
        <li>Вес...</li>
    </ul>
    <!-- созданный div -->
    <div id="container-0">
        <div id="gallery-4" class="gallery galleryid-59 gallery-columns-2 gallery-size-large">
            <figure class="gallery-item">
                <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1242">
                    ДС...
                </figcaption>
            </figure>
            <figure class="gallery-item">
                <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1244">
                    ДС...
                </figcaption>
            </figure>
        </div><img ...>
        <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1243">
            ДС...
        </figcaption>
        </figure>
        <figure class="gallery-item">
            <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1241">
                ДС...
            </figcaption>
        </figure>
        <p>Автономная панель...</p>
        <a href="...">Живой...</a>
        <a href="...">Мобильного...</a>
        <a href="...">Cпецификация ...</a>
        <li>Размер...</li>
        <strong>ДС-45:</strong>
        <strong>ДС-45М:</strong>
        <a href="..." class="head__btn_first">Рассчитать...</a>
        <div class="gallery-icon landscape">
        </div>
        <div class="gallery-icon landscape">
        </div>
        <div class="gallery-icon landscape">
        </div>
        <div class="gallery-icon landscape">
        </div>
        <a href="..." class="head__btn_first">Рассчитать...</a>
        <img class="alignnone size-full wp-image-131" src="..." alt="" width="777" height="292">
        <li>Интерфейс...</li>
        <li>Размеры ...</li>
        <a href="...
            data-lbwps-width=" 785" data-lbwps-height="508" data-lbwps-caption="..."></a>
        <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45М"></a>
        <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45"></a>
        <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45М"></a>
        <a href="...">Настольных ...</a>
        <li>Размеры...</li>
        <img width="785" height="508" src="..." class="attachment-large size-large" alt=""
            aria-describedby="gallery-4-1243" srcset="..." sizes="(max-width: 785px) 100vw, 785px"><img width="785"
            height="508" src="..." class="attachment-large size-large" alt="" aria-describedby="gallery-4-1241"
            srcset="..." sizes="(max-width: 785px) 100vw, 785px">
        <li>Время...</li>
        <img width="785" height="508" src="..." class="attachment-large size-large" alt=""
            aria-describedby="gallery-4-1242" srcset="..." sizes="(max-width: 785px) 100vw, 785px">
        <h3>Модификации</h3>
        <img width="785" height="508" src="..." class="attachment-large size-large" alt=""
            aria-describedby="gallery-4-1244" srcset="..." sizes="(max-width: 785px) 100vw, 785px">
    </div>
</blockquote>

html, который должен получиться:

<blockquote>
    <h2>Модификации...</h2>
    <!-- созданный div -->
    <div id="container-0">
        <h3>Модификации</h3>
        <p>Сканер...</p>
        <div id="gallery-4" class="gallery galleryid-59 gallery-columns-2 gallery-size-large">
            <figure class="gallery-item">
                <div class="gallery-icon landscape">
                    <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45"><img
                            width="785" height="508" src="..." class="attachment-large size-large" alt=""
                            aria-describedby="gallery-4-1243" srcset="..." sizes="(max-width: 785px) 100vw, 785px"></a>
                </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1243">
                    ДС...
                </figcaption>
            </figure>
            <figure class="gallery-item">
                <div class="gallery-icon landscape">
                    <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45М"><img
                            width="785" height="508" src="..." class="attachment-large size-large" alt=""
                            aria-describedby="----" sizes="(max-width: 785px) 100vw, 785px"></a>
                </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1242">
                    ДС...
                </figcaption>
            </figure>
            <figure class="gallery-item">
                <div class="gallery-icon landscape">
                    <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45"><img
                            width="785" height="508" src="..." class="attachment-large size-large" alt=""
                            aria-describedby="gallery-4-1241" srcset="..." sizes="(max-width: 785px) 100vw, 785px"></a>
                </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1241">
                    ДС-45
                </figcaption>
            </figure>
            <figure class="gallery-item">
                <div class="gallery-icon landscape">
                    <a href="..." data-lbwps-width="785" data-lbwps-height="508" data-lbwps-caption="ДС-45М"><img
                            width="785" height="508" src="..." class="attachment-large size-large" alt=""
                            aria-describedby="gallery-4-1244" srcset="..." sizes="(max-width: 785px) 100vw, 785px"></a>
                </div>
                <figcaption class="wp-caption-text gallery-caption" id="gallery-4-1244">
                    ДС-45М
                </figcaption>
            </figure>
        </div>
        <p>На монитор...</p>
        <p>Автономная...</p>
        <p><img class="alignnone size-full wp-image-114" src="..." alt="" width="900" height="500" srcset="..."
                sizes="(max-width: 900px) 100vw, 900px"></p>
        <p style="text-align: center; padding-top: 1em;"><a href="..." class="head__btn_first">Рассчитать...</a> <a
                href="..." class="head__btn_second">Демонстрация</a></p>
        <h3>Структурная...</h3>
        <p>Сканер...<a href="...">Живой сканер</a>:</p>
        <ul>
            <li>самостоятельно в <a href="...">Настольных...</a></li>
            <li>в составе <a href="...">Дактилоскопических...</a></li>
            <li>в составе <a href="...">Мобильного...</a></li>
        </ul>
        <p>
            <a href="..." data-lbwps-width="637" data-lbwps-height="334"><img class="alignnone size-full wp-image-131"
                    src="..." alt="" width="777" height="292"></a>
        </p>
        <h3>Характеристики</h3>
        <p><a href="/wp-content/uploads/DS_45_datasheet.pdf">Cпецификаци...</a>(PDF 1Mb)</p>
        <p><strong>Формируемые...</strong> прокатанные...</p>
        <ul>
            <li>Время...</li>
            <li>Время...</li>
            <li>Область...</li>
            <li>Размер...</li>
            <li>Размер...</li>
            <li>Разрешение...</li>
            <li>Динамический...</li>
            <li>Отношение...</li>
            <li>Интерфейс...</li>
            <li>Требуемый...</li>
        </ul>
        <p><strong>ДС-45:</strong></p>
        <ul>
            <li>Электропитание...</li>
            <li>Мощность...</li>
            <li>Размеры...</li>
            <li>Вес...</li>
        </ul>
        <p><strong>ДС-45М:</strong></p>
        <ul>
            <li>Электропитание...</li>
            <li>Мощность...</li>
            <li>Размеры...</li>
            <li>Вес...</li>
        </ul>
        <p style="text-align: center; padding-top: 1em;">
            <a href="..." class="head__btn_first">Рассчитать...</a>
            <a href="..." class="head__btn_second">Демонстрация</a></p>
    </div>
</blockquote>

Answer 1

У вас в коде несколько проблем:

При добавлении элементов вы объявляете конфликтующую i, но это не так важно
.getElementsByTagName() возвращает живую коллекцию элементов. Когда вы запускаете div.appendChild(content[c]), content[c] исчезает из content. В таком случае, новй элемент оказывается на том же индексе, и вы добавляете элементы через один. Лучше брать querySelectorAll(), он возвращает неживую коллекцию.
(правка) elem.querySelectorAll('*') возвращал все элементы находящиеся в elem, надо было использовать elem.children. Так как это живая коллекция, надо было преобразовать её в массив (Array.from(elem.children))

Исправленный код:

//создаю переменную elements которая принимает значение коллекции всех элементов с тегом blockquote на странице
var elements = document.getElementsByTagName('blockquote')
//запускаю цикл для каждого элемента коллекции elements от 0 до i                              
for (var i = 0; i < elements.length; i++) {
    //внутри цикла запускаю функцию
    (function (i) {
        //создаю новый div        
        var div = document.createElement('div');
        //помещаю div в elements[i]                                   
        elements[i].appendChild(div);
        //присваиваю id container-i                                               
        div.id = ('container-' + i);
        
        //нахожу все теги внутри elements[i] и помещаю их в переменную content              
        var content = Array.from(elements[i].children); // Поправлено
        
        //элементы content от 1 до i помещаю внутрь созданного div                              
        for (var c = 1; c < content.length-1; c++) { // И тут тоже изменено
            div.appendChild(content[c]);
        }
        //создаю переменную btnCollapse из нулевого элемента коллекции content и крашу ее в красный цвет   
        var btnCollapse = content[0];
        btnCollapse.style.color = 'red';
        //по нажатию на btnCollapse срабатывает функция которая скрывает/раскрывает div    
        btnCollapse.onclick = function () {
            div.style.display === 'none' ? div.style.display = 'block' : div.style.display = 'none';
        };
    })(i);
}

<blockquote>
  <div class="btn">Should be button!</div>
  <p>Demo</p>
  <cite>Cite</cite>
  <code>Code</code>
  <a href="">Link</a>
  <div>Demo <b>(nested)</b></div>
</blockquote>

БЛОГ НА HUSL

Как корректно обернуть контент в div при помощи js?

Ответы (1 шт):