Javascript .innerHTML的正确用法_Javascript_Html_Innerhtml

Javascript .innerHTML的正确用法

javascript html

Javascript .innerHTML的正确用法,javascript,html,innerhtml,Javascript,Html,Innerhtml,试图将内容添加到各个div容器中时，我无意中发现了命令.innerHTML，我试图相应地实现该命令。奇怪的是，我得到了以下错误： *未捕获的TypeError:无法读取null的属性“innerHTML”* 我正在本地Apache服务器上运行代码，如果这有什么不同的话 index.html <html> <head> <title>Welcome</title> <script src="http://code.jquer

试图将内容添加到各个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>

把它放在窗户里

元素必须存在于DOM中，在您可以在JS中访问它之前，您必须确保您的DOM元素在使用javascript访问它们之前已经加载

因为您使用的是jquery，所以可以简单地

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

试试这个

html

请参见

yes，与下面的答案一样，您必须等待DOM加载。这就是为什么我总是把我的脚本放在正文的末尾

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

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

<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>

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