document.createElement / document.body.appendChild 没有在执行的地方创建/写入 div答案

【问题标题】：document.createElement / document.body.appendChild not creating / writing div where executeddocument.createElement / document.body.appendChild 没有在执行的地方创建/写入 div
【发布时间】：2012-02-02 23:29:29
【问题描述】：

我有一个 ID 为“headercontent”的 div，我有一个脚本，如果在用户系统上启用了 javascript，我将编写一个链接，但也有一个使用 noscript 的备份，以防万一用户没有启用 javascript。

代码运行良好，执行时写入了'a'元素，但问题是代码没有写入执行它的div中。它写在'headercontent'div之外，它忽略了类完全风格，即使它是用渲染代码编写的。我不太担心样式/类，因为我可以只为元素添加一个样式属性，并在必要时用 javascript 编写它，但我更关心为什么它在这个 div 之外编写代码。

我的代码是：

<div id="headercontent">
    hey, this is a div.
    <a href="#" class="button">This is a link</a>
    <a href="#" class="button">This is another link</a>

    <script type="text/javascript">
        writeask()
        function writeask() {
         var writeaskbox = document.createElement('a');
         writeaskbox.href = 'javascript:askbox()';
         writeaskbox.className = 'button';
         writeaskbox.innerHTML = 
             ['Ask'].join(' ')
         document.body.appendChild(writeaskbox);
        }

        function askbox(){
         var askbox = document.getElementById('askbox')
         if (askbox.style.display == 'none') {
          askbox.style.display = 'block'
          askbox.style.height = '150px'             
         } else {
          askbox.style.display = 'none'
          askbox.style.height = '0px'
         }
        }
    </script>
    <noscript><a href="/ask" class="button">Ask</a></noscript>
</div>

如何让 writeask() 函数在执行它的同一 div 中创建这个元素？这样最终的输出就是：

<div id="headercontent">
    hey, this is a div.
    <a href="#" class="button">This is a link</a>
    <a href="#" class="button">This is another link</a>
    <a href="javascript: askbox()" class="button">Ask</a>
</div>

代替：

<div id="headercontent">
    hey, this is a div.
    <a href="#" class="button">This is a link</a>
    <a href="#" class="button">This is another link</a>
</div>
<a href="javascript: askbox()" class="button">Ask</a>

我仍然是 javascript 的初学者，所以我现在很困惑。如果有人可以提供帮助，将不胜感激。

提前谢谢你。丹。

【问题讨论】：

标签： javascript appendchild createelement

【解决方案1】：

首先，您在函数存在之前调用 writeask()，因此在这种情况下，您应该以相反的方式执行此操作。应该是：

function writeask() {}
function askbox(){}

writeask();

然后你将它附加到正文中

document.body.appendChild(writeaskbox);

，而不是 div，因为它应该是

document.getElementById("headercontent").appendChild(writeaskbox);

【讨论】：

非常感谢，我会接受您的回答，因为您指出了我的脚本顺序错误。这非常有效。
@DanS 函数 - 函数调用顺序不是问题。 JavaScript 将函数定义提升到给定范围的顶部。
@Shad，我了解吊装。告诉我在这种情况下会有什么不同，如果他在声明函数之前调用它，我会向你的 -1 鞠躬。我真的认为事先声明函数，提高可读性，如果 Dan S 是一个 javascript 初学者，我不相信他考虑了 Hoisting...
@AndréAlçadaPadez 我投了反对票，因为你称它为错误，而且它肯定不是错误。可读性问题不会导致错误。
@DanS JavaScript 解析器不需要做任何额外的搜索；在运行时，它将所有这样的函数和var声明提升到开头，然后继续其余的。

【解决方案2】：

代替

document.body.appendChild(writeaskbox);

使用

document.getElementById("headercontent").appendChild(writeaskbox);

【讨论】：

【解决方案3】：

代替

document.body.appendChild(writeaskbox);

您应该执行以下操作：

document.getElementById('headercontent').appendChild(writeaskbox);

【讨论】：