In this article, we explore how the Insert as last 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 last child of the targeted element:

<div class="nosto_element" id="new-last-child"></div>

When the page is loaded, the new DOM structure looks like this:

<div class="container"> 
 <div class="inner first"></div>  
 <div class="inner second"></div>  
 <div class="inner third"></div>
 <div class="nosto_element" id="new-last-child"></div>
</div>

From a Nosto Admin Panel perspective, here's the summary of the set-up: 

Did this answer your question?