javascript - document.createElement/document.body.appendChild 不在执行时创建/写入 div

Question

我有一个 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 的初学者，所以我现在很困惑。如果有人可以提供帮助，我们将不胜感激。

提前致谢。丹.

Answer 1

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

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

writeask();

然后你将它附加到正文

document.body.appendChild(writeaskbox);

，不是 div，它应该是

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