[xShift]

В общем пилил запиливатель красивых элементов форм на чистом JS и нашел угарный баг браузеров.

Lets look:

let test = document.querySelectorAll('#tabs');

	test[0].parentElement.parentElement.outerHTML = '<div class="zalupa">'+ test[0].parentElement.parentElement.outerHTML +'</div>';

	console.log( document.querySelectorAll('#logotype')[0].closest('#mainHeader') ); // work

	console.log( test[0].parentElement.parentElement.parentElement ); // zalupa null

	console.log( test[0].closest('.zalupa') );	// zalupa null

<div id="shell">
		<header id="mainHeader">
			<h1 id="logotype">
				<a href="#" data-title="and add">adds</a> 
				:: <span>asdasdasdsad</span></h1>
		</header>
	</div><!--#shell-->

	<div id="testElements">
		
		<section style="text-align: center; width: 980px; margin: 0 auto">
			<aside id="tabs" class="tabs">
				<ul>
					<li data-link="tab-1">1</li>
					<li class="activetab" data-link="tab-2">2</li>
					<li data-link="tab-3">3</li>
				</ul>

				<div data-content="tab-1">Tous mes rêves se réalisent.</div>

				<div class="tabactive" data-content="tab-2">Si on vit sans but, on mourra pour rien.</div>

				<div data-content="tab-3">Jouis de chaque moment.</div>

			</aside>
		</section>
</div>

В общем долго не понимал почему нет доступа к залупе и почему у меня не работает unwrap . Оказывается залупа не добавляется в какой-то там node-list и приходится каждый раз получать через querySelector.

И тогда я решил создавать залупу не строчно, но c помощью запиленной в браузер функциональности:

let test = document.querySelectorAll('#tabs');

	let zalupa = document.createElement('div');

	zalupa.classList.add('zalupa');

	zalupa.innerHTML = test[0].parentElement.parentElement.outerHTML;

	test[0].parentElement.parentElement.outerHTML = zalupa.outerHTML

	console.log(test[0].closest('.zalupa')); // zalupa null

Таким образом выяснилось, что даже так залупа не появляется, а кроме innerHTML и outerHTML я средств манипуляции содержимым не знаю.

Может кто-то знает более изящный и простой способ манипулировать такими данными, чтобы они потом были доступны в next, previous node list и конечно closest или parentElement? Не охота мне писать createElement вообще ибо это расточительство.