Hidden div in my html file - html

Question

I am currently using scrollNav.js after I fused it in with my HTML I noticed there is some extra div showing in my HTML.
But I can only detect this div through Google Devtools (f12). Is this even possible?
This is my HTML file:
<section id="scrollNav-1" class="home scroll-nav_section">
<div class="container">
<div class="tagline post-article"> <!--row1-->
<h2>HI !</h2>
</div>
And this is the div according to DevTools (f12)
<section id="scrollNav-1" class="home scroll-nav_section">
<div class="container">
<nav class="scroll-nav fixed" role="navigation"><div class="scroll-nav__wrapper"><span class="scroll-nav__heading">Scroll To</span><ol class="scroll-nav__list"><li class="scroll-nav__item active in-view">HI !</li></ol></div></nav><div class="tagline post-article"> <!--row1-->
<section id="scrollNav-1" class="scroll-nav__section"><h2>HI !</h2></section>
</div>
*My current update now is I am able to delete the "scroll to" by typing False in showheadline and the rest of all additional div by setting display:none
and become like this:
But this is not the result that I wanted to. i want it to be crystal clear, where it came from and how to overcome it instead of just making it hidden.
<section id="scrollNav-1" class="home scroll-nav_section">
<div class="container">
<nav class="scroll-nav fixed" role="navigation"><div class="scroll-nav__wrapper"><ol class="scroll-nav__list"><li class="scroll-nav__item active in-view">HI !</li></ol></div></nav><div class="tagline post-article"> <!--row1-->
<section id="scrollNav-1" class="scroll-nav__section"><h2>HI !</h2></section>
</div>
the script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/scrollNav/jquery.scrollNav.min.js"></script>
<script>
$('.post-article').scrollNav({
sections: 'h2',
subSections: false,
sectionElem: 'section',
className: 'scroll-nav',
showHeadline: false,
showTopLink: false,
topLinkText: 'Top',
fixedMargin: 40,
scrollOffset: 40,
animated: true,
speed: 500,
insertTarget: this.selector,
insertLocation: 'insertBefore',
arrowKeys: false,
scrollToHash: true,
onInit: null,
onRender: null,
onDestroy: null
});
</script>
How do I delete the extra div that I don't even know where it came from?

Answer 1

The extra div is not extra. It's created by the scrollnav library you're using. Many plugins and libraries create extra elements on the dom in order to add their features. Nothing to worry about :)