JQuery in html calling sequential text nodes during spread
Consider my three pieces of code
<div>
Lorem Ispum dolor sit <span class='highlightYellow'>Amet </span>
<br />Lorem Ispum <span class='highlightYellow'>dolor</span> sit Amet
</div>
<div>
Lorem Ispum dolor sit <span class='highlightYellow'>Amet </span>
Lorem Ispum <span class='highlightYellow'>dolor</span> sit Amet
<br />
</div>
<div>
Lorem Ispum dolor sit <span class='highlightYellow'>Amet </span>
Lorem Ispum <span class='highlightYellow'>dolor</span> sit Amet
</div>
and the button
<button>Unwrap text from .hightlightYellow elements</button>
I am using this method to unpack
$(".highlightYellow").contents().unwrap();
When you see children <div>
, something like $('div')[i].childNodes
a tag <br/>
, the content in the div becomes multiple consecutive text nodes. how do two texnodes appear one after the other? This is really impossible. But here it is.
The third has <div>
no tag <br/>
. So that's okay. I assumed the tag <br/>
is only causing this problem. Or is there any other way to overcome this?
Here is the Fiddle , you can see the problems by checking the item
source to share
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1312295772
When a document is first exposed via the DOM, there is only one Text node for each block of text. Users can create adjacent text nodes that represent the content of a given element without any intermediate markup, but remember that there is no way to represent the separation between these nodes in XML or HTML, so they will not (shared) persist between DOM editing sessions. The normalize () on Element method combines any such adjacent Text objects into a single node for each block of text; this is recommended before using operations that depend on the specific structure of the document, such as navigating with XPointers.
$('div').each(function(i, element) {
element.normalize();
//The normalize() method removes empty Text nodes, and joins adjacent Text nodes.
});
source to share