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:

Did this answer your question?