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:
