Javascript Innerhtml - 奇怪的样式

Question

我有一个包含多个部分的拉伸(stretch)部分。这些部分在我的 CSS 中对齐为“合理”。在普通的 HTML 代码中，这工作正常。像这样:

Normal HTML - Example 1我想用 js innerhtml 创建这个菜单。这是因为 <a>菜单上的标签包含 javascript 函数。问题是，<a href>必须在js可用时执行javascript函数，否则必须打开一个普通的url。

我试过这样的东西，但是当js可用时，浏览器仍然在函数执行后打开href url(当然)。

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

我为此找到了一些东西:

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

这将返回与示例 1 相同的 html 代码。但是，样式不同:
Wrong styling .拉伸(stretch)或类似的东西出了问题。

问题与 CSS 无关，因为在示例 1 中一切正常。

代码在 Chrome 和 Firefox 的开发者工具中看起来完全一样。

我已经为此工作了几个小时，并尝试了很多，但我不知道如何解决这个问题。谢谢你的帮助。

Answer 1

这个怎么样:

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

我们选择每个具有定义的 onclick 事件的 anchor ，然后将其 href 属性设置为 #。所以，如果浏览器有 JS，这将触发并删除 href。如果没有 JS，那么这当然不会触发，并且原始的 hrefs 将保持不变。