Question

I was creating a chrome extension in which some icons are shown in a blank tab. I am using javascript to add the icons in the page. Below are the code snippets:

HTML:

<div id="icons" class="icons"></div>

Javascript:

function addIcons() {
  for (var i = 0; i < iconArray.length; i++) {
    var link = document.createElement('a');
    link.href = linkArray[i];

    var icon = document.createElement('img');
    icon.src = "images/" + iconArray[i];
    icon.title = titleArray[i];

    link.appendChild(icon);
    document.getElementById('icons').appendChild(link);
  }
  document.getElementById('icons').style.borderBottom="2px solid blue";
}

The problem is that the border is appearing above the icons(The border should appear below!). Can anybody tell me what should be done to get the desired result?

Answer 1

Just tried your code and it works correctly.

Screenshot: https://skitch.com/runk/83fes, latest Chrome.

Are you sure you have a valid html markup on the rest of the page? May be problem with it.

And I’d suggest not to set a css style via js.

<div id="icons" class="icons" style="border-bottom: 2px solid blue"></div>

Or using css style tag (file)

<style>
.icons { border-bottom: 2px solid blue }
</style>