Как вывести содержимое массива со всеми тегами и стилями?

Question

[oelena]

Добрый день, подскажите, как вывести на экран содержимое массива, в таком виде, в каком мы его первоначально собрали с сайта(теги и классы)

Есть html. В самой первой ul у нас всегда 15 элементов. В других может быть от 0 до бесконечности. Но показываться должно не более 15. Сделала с помощью css (overflow-y: hidden), чтоб больше положенного не отображалось.

<ul class="product-menu__list">
										<li class="product-menu__item">
											<a href="javascript:;" class="product-menu__item_link">Элемент элемент1</a>
											<ul class="dropdown-menu js-first-lev">
												<li class="dropdown-menu__item">
													<a class="dropdown-menu__item-link" href="javascript:;">Элемент элемент1</a>
												</li>
												<li class="dropdown-menu__item">
													<a class="dropdown-menu__item-link" href="javascript:;">Какой-то элемент большой</a>
												</li>
											</ul>
										</li>
									</ul>

Далее написала js где собрала массив с этих элементов, и создала кнопку, по которой должен прокручиваться массив показывая нужные элементы. Добавила кнопку в массив. Но не могу разобраться как отобразить массив на экране (в консоли то массив с кнопкой), а на сайте кнопка не отображается.

var dropDownMenuItems = Array.prototype.slice.call(document.querySelectorAll('.dropdown-menu__item'));
var productMenuItems = Array.prototype.slice.call(document.querySelectorAll('.product-menu__item'));

for(var productMenuItem of productMenuItems) {
	productMenuItem.onmouseenter = function (evt) {
			if(this.querySelector('.js-first-lev')) {
				var arrayProductMenuItem = Array.prototype.slice.call(this.lastChild.querySelectorAll('.js-first-lev > .dropdown-menu__item'));
				if(arrayProductMenuItem.length > 14) {
					var newButtonDown = document.createElement('li');
					newButtonDown.innerHTML = "<a> Показать еще </a>";
					newButtonDown.className = "dropdown-menu__item  dropdown-menu__item--grey without-dropdown";
					console.log(newButtonDown);
					arrayProductMenuItem.splice(14, 1, newButtonDown)
				}
				// this.lastChild.innerHTML = arrayProductMenuItem;


			}

	};
};

Может кто еще подскажет, как это написать более универсально, уровней 2, а у меня получается на каждый уровень надо писать такую штуку, потому что иначе отображается внутри элемента абсолютно все dropdown-menu__item (даже которые на 2 уровне), а мне надо только конкретно детей, не заходя в них глубже

Answer 1

[Tim]

После формирования нового элемента вы не добавляете элемент в документ
productMenuItems[0].append(newButtonDown)

p.s она может много добавить в вашем коде

Comments

[oelena]

Таким образом она добавляется в product-menu__item, а мне нужно в ребенка (в новый выпадающий список) добавить последним отображающимся элементом

[Tim]

oelena, Надеюсь я Вас правильно понял

[oelena]

Tim-A-2020, да, спасибо за подсказку.

[oelena]

Tim-A-2020, не подскажите еще, почему в консоле при наведении на элементы содержащий ul возвращает null
console.log(evt.target) выдает в консоль только 1 ребенка
в консоль выводила:

console.log(evt.target)
console.log(childrenUl)

Я поняла, ul у меня изначально скрыт, поэтому он его не видит. Осталось разобраться, как быть дальше

[Tim]

oelena, скиньте всю функцию

[oelena]

Tim-A-2020, я взяла ваш пример, но списки внутри у меня скрыты и показываются по ховеру. Видимо поэтому в evt.target не находится ul
Вот https://jsfiddle.net/7q5j018z/ скрыла, и тоже не отрабатывает
Хотя в примере отрабатывает, но почему то не всегда если добавить элементов

[Tim]

oelena, там все правильно работает. в скрипте стоит условие, если больше 3 элементов то добавлять кнопку "показать еще". поменяйте условие или уберите его. Вы просто просили если больше 15 элементов, то показывать. Я не стал просто добавлять 15 элементов,а уменьшил колличество элементов

[oelena]

Да, вижу это условие и вполне понимаю для чего оно нужно. Но не понимю почему у меня в верстке при таком же раскладе console.log(childrenUl) выдает null, а console.log(evt.target) из двоих детей показывает только одного (ссылку). С чем это вообще может быть связанно?

var productMenuList = document.querySelector('.product-menu__list');
productMenuList.onmouseover = evt => {
	var childrenUl = evt.target.querySelector('ul')
	console.log(childrenUl)
	console.log(evt.target)
	if (childrenUl) {
		$el = [...childrenUl.children].pop().classList.contains('show');
		if (childrenUl.children.length > 3 && !$el) {
			var newButtonDown = document.createElement('li');
			newButtonDown.innerHTML = '<a href="#" class=\"dropdown-menu__item-link\"> Показать еще </a>';
			newButtonDown.className = "dropdown-menu__item show dropdown-menu__item--grey without-dropdown";
			childrenUl.append(newButtonDown);
			console.log(newButtonDown)
		}
	}
};

[Tim]

oelena, исходя из позиции мыши вы получаете элемент. если у детей отсутствует ul, то приходит null. т.е
ul>li>ul>li если ваша мышка на последнем li,то childrenUl будет null

[oelena]

Tim-A-2020, а она на каждом элементе null выдает(

[Tim]

oelena, на каждом элементе она не может выдавать null иначе бы ничего не работало