Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   добавить элемент после li (https://javascript.ru/forum/misc/61417-dobavit-ehlement-posle-li.html)

1baddog1 17.02.2016 15:33
добавить элемент после li
 
Добрый день,

Пытаюсь сделать с помощью innerHTML, ни как не получается. Хочу, чтобы после <li class="selected"> автоматически добавлялся элемент <span class="selected_t"></span>
и получалось в итоге:

<li class="selected">
<span class="selected_t"></span>



Помогите плз

рони 17.02.2016 15:37
1baddog1,
https://learn.javascript.ru/multi-insert
где ваши попытки?

1baddog1 17.02.2016 16:04 
<script>
  var ul = document.body.children[0];
  var li = ul.children[2];

  li.insertAdjacentHTML("beforeBegin", "<span class="selected_t"></span>");
</script>


из учебника попробывал, тоже не получается

и 
<script>
   document.getElementById('selected').innerHTML+='<li class="selected"><span class="selected_t"></span>'
</script>



<div id='selected'>
   <li class="selected">
</div>

<li class="selected">
<span class="selected_t"></span>


но тут не получается т.к. тэг </li> выходит за div

AciDWarrioR 17.02.2016 16:13
1baddog1,
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<li class="selected"></li>
</body>
</html>
<script>
 $(".selected").after("<span class='selected_t'></span>");
</script>

1baddog1 17.02.2016 16:21
Цитата:
Сообщение от AciDWarrioR (Сообщение 408199)
1baddog1,
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<li class="selected"></li>
</body>
</html>
<script>
 $(".selected").after("<span class='selected_t'></span>");
</script>
спасибо, уже как-то работает, но я немного не до конца уточнил. В данном случае в итоге получается 
<li class="selected"></li>
<span class='selected_t'></span>


а я как раз пытаюсь сделать, чтобы было так:
<li class="selected">
<span class='selected_t'></span>
</li>

рони 17.02.2016 16:25
Цитата:
Сообщение от 1baddog1
li.insertAdjacentHTML("beforeBegin", "<span class="selected_t"></span>");
внутри двойных кавычек одинарные и наоборот

рони 17.02.2016 16:31
1baddog1,
<ul>
  <li class="selected">
  <ul>
  <li></li>
</ul></li>
</ul>
<script>
  var li = document.querySelector("li.selected")
  li.insertAdjacentHTML("afterBegin", "<span class='selected_t'></span>");
</script>

AciDWarrioR 17.02.2016 16:32
Цитата:
Сообщение от 1baddog1
а я как раз пытаюсь сделать, чтобы было так:
<li class="selected">
<span class='selected_t'></span>
</li>
Заменит after на append

рони 17.02.2016 16:34
AciDWarrioR,
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<li class="selected">
    <ul>
  <li></li>
</ul></li>
<script>
 $(".selected").prepend("<span class='selected_t'></span>");
</script>
</body>
</html>


[HTML run][/HTML]
- run чтобы запустить код

рони 17.02.2016 16:35
Цитата:
Сообщение от AciDWarrioR
Заменит after на append
:nono:

AciDWarrioR 17.02.2016 16:43
Цитата:
Сообщение от рони
- run чтобы запустить код
Знаю, но смотреть куда он вставился, слишком глубоко приходится лезть на javascript.ru, не находишь?
Цитата:
Сообщение от рони
Заменит after на append
Ну вот с этим согласен, но в его условиях, ему подходит и append)

рони,
Помоги, пожалуйста с Этим


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