insertAdjacentHTML question

[Bethrezen]

Hi all

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)
}

Now what this does is it loops through the object and then for each key it constructs an image link I then use insertAdjacentHTML to insert those links at the relevant location in the page in this case after the last image in the left hand container

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">

However instead of getting the expected output I’m getting

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 -->

For some incredibly irritating reason the insertion order is inverted, and instead of the new line being inserted at the expected location it is being inserted after the inserted image links even though I specified that it should be inserted after the last image in the left hand container but before the inserted image links as you can see above.

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.