为什么我不能用Javascript innerHTML属性更新HTML列表项?

时间:2015-10-04 13:32:46

标签: javascript html html-lists

我正在尝试学习Javascript,并决定自己尝试innerHTML属性。但浏览器似乎忽略了Javascript代码。我做错了什么?

 <!DOCTYPE html>
    <html>
      <head>
        <title>JavaScript - Document Object Model </title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
      <body>
        <div id="page">
          <h1 id="header">List</h1>
          <h2>Buy groceries</h2>
          <ul id="todo">
            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li><li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
         </ul>
       </div>

     <script type="text/javascript">
       var thirdItem = getElementById('three');
       var itemContent = thirdItem.innerHTML;
       thirdItem.innerHTML = '<li id="three" class="hot">chicken</li>';
     </script>
   </body>
  </html>

1 个答案:

答案 0 :(得分:5)

您的代码应为:

var thirdItem = document.getElementById('three');
...
thirdItem.innerHTML = 'chicken';

'You might not need jQuery'是JavaScript DOM例程与jQuery例程的简短参考。