In this article, we explore how the Insert as first manipulation method works when you decide to target an element present on the source code of a given page.
We will focus on the DOM structure below:
<div class="container">
<div class="inner first"></div>
<div class="inner second"></div>
<div class="inner third"></div>
</div>When exploring the code in more details, we will want to target the following element:
<div class="container"> And insert the following element as a first child of the targeted element:
<div class="nosto_element" id="new-first-child"></div>When the page is loaded, the new DOM structure looks like this:
<div class="container">
<div class="nosto_element" id="new-first-child"></div>
<div class="inner first"></div>
<div class="inner second"></div>
<div class="inner third"></div>
</div>From a Nosto Admin Panel perspective, here's the summary of the set-up: