Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавить теги внутри тега li (https://javascript.ru/forum/dom-window/81937-dobavit-tegi-vnutri-tega-li.html)

Vaska 17.02.2021 12:30

Добавить теги внутри тега li
 
Привестствую!
Делаю верстку вкладок и чтобы стало красиво, нужно внутри тега li добавить парный тег DIV с атрибутом CLASS. Эти вкладки на десятках страниц, поэтому нужно скриптом добавить. Нужно, чтобы во всех популярных браузерах работало, в IE конечно тоже.

Сейчас так:
<div class="tabmenu">
    <ul class="tab">
        <li class="active"><a href="">Отправленные</a></li>
        <li><a href="">Системные</a></li>
    </ul>            
</div>


Нужно так:
<div class="tabmenu">
    <ul class="tab">
        <li class="active"><div class="tab-inner"><a href="">Title 1</a><div></li>
        <li><a href=""><div class="tab-inner">Title 2</a><div></li>
    </ul>            
</div>

Заранее спасибо.
Смотрел эту тему http://javascript.ru/forum/misc/3062...hhijj-div.html
Не справился.

рони 17.02.2021 12:53

Vaska,
Цитата:

Сообщение от Vaska
чтобы стало красиво

достаточно css для .tab li

voraa 17.02.2021 12:56

document.addEventListener('DOMContentLoaded', function () {
   var li, i;
   var lists = document.querySelectorAll(ul.tab>li');
   for ( i = 0; i<lists.length; i++) {
      li = lists[i];
      li.innerHTML = '<div class="tab-inner">' + li.innerHTML +'</div>';
   }
})

рони 17.02.2021 12:58

Vaska,
но если хочется погорячее
wrapEach('.tabmenu .tab li a', 'div', 1, 'tab-inner');

https://javascript.ru/forum/dom-wind...tml#post533431

Vaska 17.02.2021 13:24

Цитата:

Сообщение от рони (Сообщение 533851)
Vaska,
но если хочется погорячее
wrapEach('.tabmenu .tab li a', 'div', 1, 'tab-inner');

https://javascript.ru/forum/dom-wind...tml#post533431

Ваш вариант работает. Спасибо, большое!

Vaska 17.02.2021 13:25

voraa,
Ваш вариант не работает. Спасибо, что поучаствовали.

рони 17.02.2021 13:37

Цитата:

Сообщение от Vaska
Ваш вариант не работает

кавычки строка 3 пост #3

Vaska 17.02.2021 13:54

Цитата:

Сообщение от рони (Сообщение 533854)
кавычки строка 3 пост #3

Да, если добавить кавычку, то работает.


Часовой пояс GMT +3, время: 01:05.