logo标签列表

为什么我无法使用JavaScript的innerHTML属性更新HTML列表项？

javascripthtmlhtml-lists
3

我正在尝试学习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>
2
这是 document.getElementById() - 你必须将其作为 document 对象的方法调用。 - Pointy
1
同时，您正在尝试将<li>放入已有的<li>中-替换文本应该只是“chicken”。 - Pointy
尝试在浏览器控制台中检查错误。 - Grundy
谢谢！非常感谢。 - VaVa
1个回答
5

你的代码应该是：

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

'你可能不需要jQuery'是JavaScript DOM例程与jQuery例程的简短参考。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接