Question

尝试将内容添加到各个div容器中我偶然发现了命令.innerHTML，我试图相应地实现它。奇怪的是我收到以下错误：

*未捕获的TypeError：无法读取null *
的属性'innerHTML'

我在我的本地Apache服务器上运行代码，如果这有任何区别的话。

的index.html

<html>
  <head>
    <title>Welcome</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div id="header">
  <h1>Startseite</h1>
  </div>
  <div id="container">
    <div id="left">
        Navigation
    </div>
    <div id="content"></div>
    <div id="right"></div>
    <div class="clr"></div>
  </div>
  </body>
</html>

javascript.js

var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";

Answer 1

将其放入window.onload

window.onload = function()
   var navidiv = document.getElementById('left');
   navidiv.innerHTML += "FirstElement"; 
}

该元素必须存在于DOM中，才能在JS中访问它

Answer 2

在使用javascript访问DOM元素之前，必须确保已加载DOM元素。

由于您使用的是jquery，因此您的javascript可以只是

$(function() {
  var $navidiv = $('#left');
  $navidiv.html($navidiv.html() + 'FirstElement');
});

Answer 3

试试这个

<强> HTML

<div id="header">
  <h1>Startseite</h1>
  </div>
  <div id="container">
    <div id="left">
        Navigation
    </div>
    <div id="content"></div>
    <div id="right"></div>
    <div class="clr"></div>
  </div>

<强> javascript.js

$( document ).ready(function() {
    var navdiv=$("#left").html();
    $("#left").html(navdiv+"FirstElement");
});

请参阅DEMO

正确使用.innerHTML

3 个答案: