Odtnhj

I am having this real simple piece of Typescript which gives me some questions in IE 11.
The whole task is, get elements out of a list, filter them and put them back in.

So i query the list via

let items = Array.prototype.slice.call(el.querySelectorAll('.pcfilter__results--tile')) as [HTMLElement];

so i have nice array to filter on.

I filter using lodash.

let result = _.filter(items, function(items) 
 return items.dataset.vehicletype.indexOf(selectValue) >= 0
);

Lets imagine our list to look like this:

<ul>
 <li data-vehicletype="foo">
 <p> lorem ipsum</p>
 </li>
 <li data-vehicletype="bar">
 <p> lorem ipsum</p>
 </li>
</ul>

So as we filtered it's now time to fill the list back up again i do this via

this.list = el.querySelector('.pcfilter__results--list');
this.list.innerHTML = '';
for (let i = 0; i < result.length; i++) 
 this.list.appendChild(result[i]);

So what i would now expect would be something like.

<ul>
 <li data-vehicletype="foo">
 <p> lorem ipsum</p>
 </li>
</ul>

But unfortunately that's not what IE 11 returns me I'm getting this:

<ul>
 <li data-vehicletype="foo"></li>
</ul>

So it looks like to me that appendChild() is somehow working in IE 11 but it's only copying the first level not the whole DOM Element including its childs.

Has somebody seen this before? That would be very helpful, thank you!

Deep clone the objects you are copying.

(Taken from this SO answer)

JSON.parse(JSON.stringify(obj))