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

[BLAzER]

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

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

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

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

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

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

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 полный ноль. Скрин с консоли прикладываю.

 

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

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> не появляется

[SelenIT]

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