Вставка кода используя JS

Question

[Alexander Lashchevsky]

Здравствуйте!

Есть список:

<ul>
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>Пункт 3</li>
      <li>Пункт 4</li>
</ul>

Необходимо сразу после открывающего тега списка вставить один код, и сразу перед закрывающим тегом списка - другой, чтобы получилось:

<ul>
      <li><div class="a"></div><div class="b">Пункт 1</div></li>
      <li><div class="a"></div><div class="b">Пункт 2</div></li>
      <li><div class="a"></div><div class="b">Пункт 3</div></li>
      <li><div class="a"></div><div class="b">Пункт 4</div></li>
</ul>

Как это сделать?

Answer 1

[Анна Бакурова]

1) подключаем Jquery (Я люблю 1.8 версию)
2) создаём отдельный файл нашего js и подключаем его
3) пишем в нашем новом файле код
jQuery(function(){
$('ul > li').each(function(){
var listHTMl = li.html();
var listStr = ''+listHTMl+'';
$(this).html('').prepend('').append('listStr ');
});
});

Comments

[Анна Бакурова]

вроде должно работать

[Юрий Лобанов]

@Libris и получите то же, что было до этого :)
''+listHTMl+''

[Анна Бакурова]

Ну да нам нужно сначала узнать что в теге потом удалить из него всё а далее строим всё что хотим. Тут человек спросил как до вставить и как после, вот Я и показала prepend и append

[Анна Бакурова]

только вот правильная строка
$(this).html('').prepend('').append('listStr ');

[Alexander Lashchevsky]

Спасибо. Проблема решена. С меня кофе. :)

[Юрий Лобанов]

@Libris вот и я о чем. Зачем использовать prepend и append? Посмотрите мой пример, все куда проще.

[Анна Бакурова]

@iiil тоже вариант не спорю, но мне показалось что а данном случае будет правильнее показать человеку код который выполняет непосредственно то что он хочет, хоть и строк больше. Функции просто пусть знает... И использует на будущее. Я просто html использую когда нужно извлечь информацию и/или заменить её в теге, но не для добавления инфы перед или после)))

[Юрий Лобанов]

@Libris в том и дело, что решать надо не так, как просят, а так, как правильно. Все дело в том, что неопытные программисты зачастую не правильно ставят задачу. Вот и появляются методы вроде этого. Я не спорю, что он не будет работать. Возможно, он даже правильнее моего. Я не об этом, а о том, что Вы сказали: "выполняет непосредственно то что он хочет". Это из той же оперы: как мне запихнуть блочный элемент div в строчный a. На этот вопрос есть два ответа: запихивай смело, браузеры такое уже давно терпят. А есть второй ответ - не надо так делать, используйте span или display: block для a.

Answer 2

[Константин Довнар]

Учите работу с DOM через через JS.
Можете воспользоваться jQuery или другим подходящим фреймворком - это облегчит вам задачу.

Answer 3

[Юрий Лобанов]

Если нет знаний - используйте jquery
jsfiddle.net/iiil/U5DR2