Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавление элемента span в блок div (https://javascript.ru/forum/dom-window/63683-dobavlenie-ehlementa-span-v-blok-div.html)

Янковиц 22.06.2016 18:17
Добавление элемента span в блок div
 
Добрый день. Перейду сразу к задаче:
есть такой код:
<div class="one-one">
<div class="menu-name">Пункт 1</div>
</div>
<div class="two-two">
<div class="menu-name">Пункт 2</div>
</div>
<div class="three-three">
<div class="menu-name">Пункт 3</div>
</div>

Мне необходимо добавить только ко 2 пункту простой текст "new".
Есть такой вариант:
<script type="text/javascript">
new='<span>new</span>';
document.getElementsByClassName("elem")[0].innerHTML = 'Пункт 2 ' + new;
</script>

Он рабочий. Но если я использую класс через дефис, то не работает. Надеюсь на помощь знатоков

рони 22.06.2016 18:25
Цитата:
Сообщение от Янковиц
Он рабочий.
нет
Цитата:
Сообщение от Янковиц
Но если я использую класс через дефис, то не работает.
работает.
придумайте имя для переменой!!!

Янковиц 22.06.2016 18:33 
<div class="one-one">
<div class="menu-name">Пункт 1</div>
</div>
<div class="two-two">
<div class="menu-name">Пункт 2</div>
</div>
<div class="three-three">
<div class="menu-name">Пункт 3</div>
</div>
<script type="text/javascript">
newtext='<span>new</span>';
document.getElementsByClassName("menu-name")[0].innerHTML = 'Пункт 2 ' + newtext;
</script>

Так работает, но нужно именно для второго блока

рони 22.06.2016 18:38
Цитата:
Сообщение от Янковиц
Так работает, но нужно именно для второго блока
нолик поменяйте на 1

Янковиц 22.06.2016 18:42
Спасибо, а что делать,если последовательность неизвестна. Известен только родительский класс

рони 22.06.2016 18:52
Янковиц,
:blink: 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>

<div class="one-one">
<div class="menu-name">Пункт 1</div>
</div>
<div class="two-two">
<div class="menu-name">Пункт 2</div>
</div>
<div class="three-three">
<div class="menu-name">Пункт 3</div>
</div>
<script type="text/javascript">
newtext='<span>new</span>';
document.getElementsByClassName("two-two")[0].getElementsByClassName("menu-name")[0].innerHTML = 'Пункт 2 ' + newtext;
</script>



</body>
</html>

рони 22.06.2016 18:56
Янковиц,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>

<div class="one-one">
<div class="menu-name">Пункт 1</div>
</div>
<div class="two-two">
<div class="menu-name">Пункт 2</div>
</div>
<div class="three-three">
<div class="menu-name">Пункт 3</div>
</div>
<script type="text/javascript">
var newtext=' <span>new</span>';
document.querySelector('.two-two .menu-name').insertAdjacentHTML('beforeEnd', newtext)
</script>



</body>
</html>

Янковиц 23.06.2016 17:20
Спасибо за быстрый ответ. Все работает.


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