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

而不是

document.body.appendChild(writeaskbox);

使用

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

Answer 2

首先，你在函数存在之前调用了writeask（），所以在这种情况下你应该反过来这样做。它应该是：

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

writeask();

然后你将它附加到身体

document.body.appendChild(writeaskbox);

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

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

Answer 3

而不是

document.body.appendChild(writeaskbox);

您应该执行以下操作：

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

document.createElement / document.body.appendChild没有在执行时创建/写入div

3 个答案: