Javascript Innerhtml - 奇怪的风格答案

【问题标题】：Javascript Innerhtml - Strange style thingJavascript Innerhtml - 奇怪的风格
【发布时间】：2014-02-10 05:09:09
【问题描述】：

我有一个包含多个部分的拉伸部分。这些部分在我的 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。拉伸或类似的东西出了问题。

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

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

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

【问题讨论】：

你能发布你使用的 HTML 的内容，而不是在 JavaScript innerHTML 中吗？完全猜测，链接应该在<section id="stretch"> 内而不是在它之前？
puu.sh/6Qg7S/aaa62f4e00.png 我试过了，但这对我不起作用。还是谢谢

标签： javascript html css innerhtml text-align

【解决方案1】：

这个怎么样：

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

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

【讨论】：