Question

我是javascript的新手，想要用一些文字填充div。但它不起作用。在文档中，这是执行此操作的常用方法。但是，为什么我不能为我工作呢？

我的代码是

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
    document.getElementById('mytest').innerHTML="hey";
</script>
</head>
<body>

<div id="mytest"></div>

</body>
</html>

Answer 1

您需要将脚本移动到HTML的末尾。现在，您在解析HTML之前执行脚本，因此文档为空，因此document.getElemntById('mytest')找不到任何内容。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<div id="mytest"></div>

<script type="text/javascript">
    document.getElementById('mytest').innerHTML="hey";
</script>
</body>
</html>

如果您不想移动<script>标记，请参阅此其他答案，以便对此问题及其他选项进行更多讨论：

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Answer 2

那是因为，在你的文档中，javascript首先加载，但是此时没有加载id为mytest的div。

你有两个选择让这个工作：

首先：说javascript要等到dom完全加载

window.onload=function(){
  document.getElementById('mytest').innerHTML="hey";
}

第二

将您的脚本代码放在底部，因此至少会加载javascript。

但我更喜欢第一种解决方案。

最好的

Answer 3

尝试这种方式

<!DOCTYPE html>
<html>
<head>
<title></title>

</head>
<body>

<div id="mytest"></div>

</body>
<script type="text/javascript">
    document.getElementById('mytest').innerHTML="hey";
</script>
</html>

Js fiddle

document.getElementById不起作用

3 个答案: