IE11 DOM normalize does not work with table row

Question

I want to normalize table rows. This works like a charm, with the exception of IE (tested with IE 11).

I created a demo to demonstrate the problem:

$(function() { $("table tbody tr span").each(function() { var $this = $(this); var $parent = $this.parent(); $this.replaceWith($this.html()); $parent[0].normalize(); }); }); 

 <link href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-striped table-hover"> <thead> <tr> <th>President</th> <th>Birthplace</th> </tr> </thead> <tbody> <tr> <td><span>Zach</span>ary Taylor</td> <td>Barboursville, Virginia</td> </tr> </tbody> </table> 

This replaces the <span> element with its contents. After this step, the node will look like this:

Then, normalize() is called to join the split text nodes. However, in IE11, text nodes are still split.

I do not see a problem on my part. What is the cause of this problem and what could be the solution?

---

As it turned out, this is an IE11 error, I filled out an error report !

Answer 1

It seems that IE-11 cannot normalize elements that are already part of your document if the developer toolbar is open .

This is also true for IE9 and 10 (emulated using the meta http-equiv="X-UA-Compatible" tag meta http-equiv="X-UA-Compatible" )

When you create new nodes and do not add them to the document - everything works fine (for both situations - the developer toolbar is open and closed):

 d = document.createElement('div'); d.appendChild(document.createTextNode('text 1')); d.appendChild(document.createTextNode('text 2')); console.log(d.childNodes.length + ' - Should be 2') d.normalize(); console.log(d.childNodes.length + ' - Should be 1') 

If, however, you are working with nodes that are already part of your document, the normalize function does not work if the developer toolbar is open :

 d = document.getElementsByTagName('div')[0]; d.appendChild(document.createTextNode('text 1')); d.appendChild(document.createTextNode('text 2')); console.log(d.childNodes.length + ' - should be 2 on every browser') d.normalize(); console.log(d.childNodes.length + ' - should be 1, however it\ 2 on IE') 

 <div></div> 

If you really want to, then you can extract the nodes from the document and add them after normalizing them:

 d = document.getElementsByTagName('div')[0]; d.appendChild(document.createTextNode('text 1')); d.appendChild(document.createTextNode('text 2')); console.log(d.childNodes.length + ' - should be 2 on every browser') dNew = d.cloneNode(true) dNew.normalize() d.parentElement.replaceChild(dNew, d) d = document.getElementsByTagName('div')[0]; console.log(d.childNodes.length + ' - should be 1 on every browser') 

 <div></div> 

Update - 28/8
The answer was updated after a comment from @dude. It took some time to investigate the cause here, but I think that now I have covered everything.

Please note that for IE8 (forcibly using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> in IE-11), the normalize() function works for both elements that are in the DOM tree , and elements that are not, even with the developer panel were open.

Answer 2

I'm not too familiar with DOM.normalize (), but if you are already using jQuery, managing the content of the element is pretty simple. My favorite way to remove unwanted nested tags, such as using $ .text (), is like this:

 $("table tbody tr span").each(function() { var $parent = $(this).parent(); $parent.html($parent.text()); }); 

This works if your use case is really simple as you posted. There are several other ways to do this type of thing for more complex use cases.