I was wondering if someone could explain this to me because I don’t get what’s going on nor have I been able to find a way to correct it.
Ok so I decided to see if I could figure out how to construct parts of the page via scripting to make construction a little simpler and faster so as a test case I constructed the following
Code: Select all
var icons =
{
icon1: {src: images/icon1.png, alt:icon1},
icon2: {src: images/icon2.png, alt:icon2},
icon3: {src: images/icon3.png, alt:icon3},
icon4: {src: images/icon4.png, alt:icon4},
};
document.querySelector('#left > #map2').insertAdjacentHTML("afterend", “\n”);
for (var key in icons)
{
var html = `
<img id="${key}" src="${icons[key]['src']}" alt="${icons[key]['alt']}">`;
document.querySelector('#left > #map2').insertAdjacentHTML("afterend", html)
}
The expected output of this operation should be
Code: Select all
<img src="images/grid.png" id="map" alt="Sector Map Background">
<img src="insert_sector_name.png" id="map1" alt="Sector Map Background">
<img src="insert_sector_name.png" id="map2" alt="Sector Map Background">
<img id="icon1" src="images/icon1.png" alt="icon1">
<img id="icon2" src="images/icon2.png" alt="icon2">
<img id="icon3" src="images/icon3.png" alt="icon3">
<img id="icon4" src="images/icon4.png" alt="icon4">
Code: Select all
<img src="images/grid.png" id="map" alt="Sector Map Background">
<img src="insert_sector_name.png" id="map1" alt="Sector Map Background">
<img src="insert_sector_name.png" id="map2" alt="Sector Map Background">
<img id="icon4" src="images/icon4.png" alt="icon4">
<img id="icon3" src="images/icon3.png" alt="icon3">
<img id="icon2" src="images/icon2.png" alt="icon2">
<img id="icon1" src="images/icon1.png" alt="icon1">
<!-- new line is being inserted here -->
So my question is why isn’t insertAdjacentHTML inserting the html in source order as expected, why is the insertion order being inverted and why isn't the new line being inserted at the expected location ?
Also is there a way to force insertAdjacentHTML to insert code at the desired location according to source order therefore giving me the expected output?
I'm also curious to know who though it was a good idea to invert the code insertion order when using the afterend property because its completely counter intuitive and this stupid decisions is rendering insertAdjacentHTML completely unusable.