BLAzER

Вставка html с помощью js

Рекомендованные сообщения

Помогите сделать/Сделайте за меня

С помощью данного кода я могу заменить все содержимое в блоке с id=yuynLe

document.getElementById("yuynLe").innerHTML = menu_upgrade;

Покажите пример кода который сможет не заменить а добавить html элементы вот сюда (см. скриншот)

P.S. Это гугл сайты и я никак не могу редактировать html "на прямую"

213321.png

Тут полчасика нагуглил и накидал такое

var menu_upgrade = document.querySelectorAll('ul > li:nth-child(7)');

menu_upgrade += '<p>TEST</p>';

document.querySelectorAll('ul > li:nth-child(7)').innerHTML = menu_upgrade;

Исправьте ошибку, почему не срабатывает? Сам я в js полный ноль. Скрин с консоли прикладываю.

 

123.png

Гуглил еще, вышло из моей головы такое:

var menu_upgrade = document.querySelectorAll('ul > li:nth-child(7)');
document.querySelectorAll('ul > li:nth-child(7)').innerHTML = "<p>Test</p>" + menu_upgrade[0].innerHTML;

Вот, что в консоле, на самой странички же элемент <p>Test</p> не появляется

123.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

document.querySelectorAll('ul > li:nth-child(7)') возвращает коллекцию всех элементов li, являющихся седьмыми потомками своих родительских ul. Вам нужно обновить свойство innerHTML одного из таких элементов (вероятно, единственного... пока). Присваивать строку результату querySelectorAll (самой коллекции элементов) смысла нет. Закешировать коллекцию в переменную и взять ее первый элемент — правильная мысль, но надо было довести ее до конца: присваивать обновленное значение самому menu_upgrade[0].innerHTML, а не коллекции.

Я бы воспользовался не querySelectorAll, а просто querySelector — он сразу возвращает один элемент (а не коллекцию). А заодно подстраховался бы более точным селектором, чтобы случайно не зацепить другие списки.  Итого что-то типа

var menu_upgrade = document.querySelectorAll('nav > ul > li:nth-child(7)'); // получили элемент
menu_upgrade.innerHTML += '<p>TEST</p>'; // и обновили его innerHTML

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы