Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2016, 15:33
Аспирант
Отправить личное сообщение для 1baddog1 Посмотреть профиль Найти все сообщения от 1baddog1
 
Регистрация: 25.06.2013
Сообщений: 37

добавить элемент после li
Добрый день,

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

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



Помогите плз
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2016, 15:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

1baddog1,
https://learn.javascript.ru/multi-insert
где ваши попытки?
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2016, 16:04
Аспирант
Отправить личное сообщение для 1baddog1 Посмотреть профиль Найти все сообщения от 1baddog1
 
Регистрация: 25.06.2013
Сообщений: 37

<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
Ответить с цитированием
  #4 (permalink)  
Старый 17.02.2016, 16:13
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

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>
Ответить с цитированием
  #5 (permalink)  
Старый 17.02.2016, 16:21
Аспирант
Отправить личное сообщение для 1baddog1 Посмотреть профиль Найти все сообщения от 1baddog1
 
Регистрация: 25.06.2013
Сообщений: 37

Сообщение от AciDWarrioR Посмотреть сообщение
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>
Ответить с цитированием
  #6 (permalink)  
Старый 17.02.2016, 16:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от 1baddog1
li.insertAdjacentHTML("beforeBegin", "<span class="selected_t"></span>");
внутри двойных кавычек одинарные и наоборот
Ответить с цитированием
  #7 (permalink)  
Старый 17.02.2016, 16:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

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>
Ответить с цитированием
  #8 (permalink)  
Старый 17.02.2016, 16:32
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

Сообщение от 1baddog1
а я как раз пытаюсь сделать, чтобы было так:
<li class="selected">
<span class='selected_t'></span>
</li>
Заменит after на append
Ответить с цитированием
  #9 (permalink)  
Старый 17.02.2016, 16:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

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 чтобы запустить код
Ответить с цитированием
  #10 (permalink)  
Старый 17.02.2016, 16:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от AciDWarrioR
Заменит after на append
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить элемент в переменную? Alpunto jQuery 8 04.11.2015 13:15
как найти элемент с таким же атрибутом и добавить ему класс? nmlgko Общие вопросы Javascript 8 24.09.2015 15:19
Сохранение данных после закрытия страницы HekracoB AJAX и COMET 12 02.01.2015 12:41
Как добавит в массив элемент после n-ого элемента? hardware Общие вопросы Javascript 2 31.12.2014 11:53
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11