Как обернуть html в div javascript

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

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

//создаю переменную 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); > 

Модификации.
Сканер выпускается .
На монитор .
Сканер.

  
в составе
  
в составе

(PDF 1Mb)
прокатанные изображения .

  
Время .
  
Размер .
  
Разрешение.
  
Отношение.
  
Требуемый.


  
Мощность.
  
.


  
Мощность.
  
Вес.

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

Как обернуть контент в нужные тег через js?

Мне нужно в вордпрессовском календаре выбрать определённые даты, добавить к их td класс active и обернуть само число в div с классом text. Нужные td я выбрал и класс active задал, а контент обернуть не получается.

Нужно обернуть выбранный текст

• Вопрос задан более трёх лет назад
• 4968 просмотров

Обернуть элементы в div

Как обернуть элемент (тег) в div на чистом JavaScript.

• Главная
• JavaScript
• Работа с элементами DOM

Дата публикации
4 Ноября 2019
Дата изменения
5 Ноября 2019
Уникальных просмотров

Как-то я писал небольшую заметку о том, как на jQuery оборачивать элементы в div . Однако я стараюсь не прибегать к jQuery и использовать чистый JS. На днях пришлось вновь написать аналог функций jQuery.

Скрипт обертки тега в div

Ниже вы найдете небольшой JavaScript код, который оборачивает все найденные теги в div и присваивает ему класс.

let tables = document.getElementsByTagName('table'), length = tables.length, i, wrapper; for (i = 0; i < length; i++) { wrapper = document.createElement('div'); wrapper.setAttribute('class', 'classname'); tables[i].parentNode.insertBefore(wrapper, tables[i]); wrapper.appendChild(tables[i]); }

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Как обернуть содержимое html элемента другим в jQuery

Представьте себе способ в jQuery, который позволит обернуть любой html тег или одинаковый набор тегов другими тегами, например, div-ом с определенным классом или стилем.

Это может быть полезным на html сайтах, где десятки страниц можно сразу поправить на jQuery. Например, если в футере сайта есть ссылка, которую надо обрамить дивом, то в обычном случае нам пришлось бы открывать все html страницы сайта и редактировать каждую, а за счет функции .wrap() сделать это одной строкой.

Обертывание содержимого элементов снаружи осуществляется функциями .wrap(), .wrapAll()

.wrap() – обертывает снаружи содержимое каждого выбранного элемента заданными html-элементами.

К примеру у нас есть два одинаковых элемента с классом .list5. Обернем каждый из них дивом с классом .snaryji

.wrapAll() – обертывает снаружи содержимое всех выбранных элементов заданными html-элементами.

Эта функция также заслуживает особого внимания. Понять ее работу легко из примера ниже. В нем также два дива .list5, которые обрамляются одним общим дивом .snaryji

В результате функции получим:

В обоих функциях не обязательно писать обрамляющий тег с закрытием. Можно использовать такую запись:

Сейчас мы изучили способы обрамления тегов снаружи, но есть еще более сложная (в понимании) функция, которая позволяет делать тоже самое, только внутри выбранного элемента.

.wrapInner() – обертывает изнутри содержимое выбранных элементов заданными html-элементами. Рассмотрим на примерах.

Пример 1 стандартный
Тег span
$(".list").wrapInner(" ");

Пример 2 обернет только второй .list2
Тег span 3
Тег span 4
$(".list2").wrapInner( function() if($(this).find("i:contains('Тег span 4')").length != 0)
return ' ';
else return ""; >);