On search/highlight click -> existing div becomes wrapped with existing span
<p>I have a problem with javascript search and highlight text.
For example, there is existing span element and existing div element.
Problem is that if I click on search button for some reason div element becomes a child of span element.</p>

<p>To explain it better I have created JS fiddle to show the problem:   </p>

<pre><code>function highlightSearch() {

    $('span').removeClass('highlighted');
    var text = document.getElementById('query').value;
    var query = new RegExp("(\\b" + text + "\\b(?!([^&lt;]+)?&gt;))", "gim");
    var e = document.getElementById("searchText").innerHTML;
    var enew = e.replace(/(&lt;span class='highlighted'&gt;|&lt;\/span&gt;)/igm, "");
    document.getElementById("searchText").innerHTML = enew;
    var newe = enew.replace(query, "&lt;span class='highlighted'&gt;$1&lt;/span&gt;");
    document.getElementById("searchText").innerHTML = newe;
}
</code></pre>

<p>Check problem on : <a href="https://jsfiddle.net/denisbotic/vwph38gy/10/" rel="nofollow">JSfiddle</a></p>