In this article, we will explore how the Replace 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">Hello</div>  
 <div class="inner second">And</div>  
 <div class="inner third">Goodbye</div>
</div>


When exploring the code in more details, we will want to target the following element: 

<div class="inner first">Hello</div>


And decide to replace it with the following element, which will be injected by Nosto:

<div class="nosto_element" id="new-hello">New Hello</div>


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

<div class="container">  
 <div class="nosto_element" id="new hello">New Hello</div>
 <div class="inner second">And</div>  
 <div class="inner third">Goodbye</div>
</div>


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

Did this answer your question?