javascript document.createElement / document.body.appendChild 未在执行的地方创建 / 写入 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9121610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.createElement / document.body.appendChild not creating / writing div where executed
提问by Danny S
I have a div with the ID 'headercontent' and I have a script that will write a link amongst the others if javascript is enabled on the users system, but also has a backup using noscript just in case the user does not have javascript enabled.
我有一个 ID 为“headercontent”的 div，我有一个脚本，如果在用户系统上启用了 javascript，它将在其他人之间写入一个链接，但也有一个使用 noscript 的备份，以防用户没有启用 javascript。
The code runs fine and the 'a' element is written when executed but the problem is that the code is not written in the div it is executed in. It writes it outside of the 'headercontent' div and it ignores the class style completely, even though it is written in the rendered code. I'm not too worried about the styling/class because I can just add a style attribute to the element and get it written by javascript if necessary, but I'm more concerned about why its writing the code outside of this div.
代码运行良好，执行时写入了 'a' 元素，但问题是代码没有写在执行它的 div 中。它把它写在 'headercontent' div 之外，它完全忽略了类样式，即使它是用渲染的代码编写的。我不太担心样式/类，因为我可以向元素添加样式属性并在必要时由 javascript 编写它，但我更关心为什么它在这个 div 之外编写代码。
My code is:
我的代码是：
<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>
How do I get the writeask() function to create this a element in the same div it is executed in? So that the final output is:
我如何让 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>
Instead of:
代替：
<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>
I'm still a beginner with javascript so I'm rather puzzled now. If anyone could help, that would be well appreciated.
我仍然是 javascript 的初学者，所以我现在很困惑。如果有人可以提供帮助，那将不胜感激。
Thank you in advance. Dan.
先感谢您。担。
回答by caleb
Instead of
代替
document.body.appendChild(writeaskbox);
use
利用
document.getElementById("headercontent").appendChild(writeaskbox);
回答by André Al?ada Padez
First of all, you are invoking writeask() before the function exists so, in this case you should do it the other way around. It should be:
首先，您在函数存在之前调用 writeask()，因此在这种情况下，您应该以相反的方式执行此操作。它应该是：
function writeask() {}
function askbox(){}
writeask();
and then you are appending it to the body
然后你将它附加到身体
document.body.appendChild(writeaskbox);
, not the div, as it should be
，不是 div，它应该是
document.getElementById("headercontent").appendChild(writeaskbox);
回答by darren102
Instead of
代替
document.body.appendChild(writeaskbox);
You should do the following:
您应该执行以下操作：
document.getElementById('headercontent').appendChild(writeaskbox);
