Javascript Innerhtml - Strange style thing

Question

I have got an stretched section with multiple sections in it. These sections are aligned in my CSS as 'Justified'. In normal HTML code, this works fine. Like this:

Normal HTML - Example 1 I'd like to create this menu with js innerhtml. This because the <a> tags on the menu contains javascript functions. The problem is, the <a href> has to execute the javascript function when js is available, otherwise a normal url has to be opened.

I tried something like this, but when js is available, the browser still opens the href url after the function has been executed (of course).

<a href='when_js_is_not_available.html' onclick='whenJsIsAvailable()'>Link</a>

I found something for that:

<section id=menu>
    <script>
        loadMenu();
    </script>

    <noscript>
        //Working html code, as showed on example 1
    </noscript>
</section>

Javascript:

function loadMenu(){
    document.getElementById('menu').innerHTML=""
            +"<a href='javascript:about()'><section class='linkNav'>Over NKika</section></a>"
            +"<a href='javascript:donate()'><section class='linkNav'>Doneren</section></a>"
            +"<a href='#'><section class='linkNav'>Inschrijven</section></a>"
            +"<a href='#'><section class='linkNav'>Fotos</section></a>"
            +"<a href='#'><section class='linkNav'>Links</section></a>"
            +"<section id='stretch'></section>";
}

This returns the same html code as example 1. However, the styling is not the same:
Wrong styling. Something has gone wrong with the stretching or something like that.

The problem has nothing to do with CSS, because in example 1 everything is fine.

The code looks exactly the same in the developers tools from Chrome and Firefox.

I have been working for hours on this, and tried a lot, but I don't know how to fix this.Thank you for your help.

Answer 1

how about this:

<script>
var onclicks=document.querySelectorAll('a[onclick]');
for (index in onclicks)
{
onclicks[index].href='#';
}
</script>

we select every anchor with a defined onclick event, then set its href attribute to #. So, if the browser has JS, this will fire, and remove hrefs. If there is no JS, then this will of course not fire, and the original hrefs will remain intact.