Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I update HTML list item with Javascript innerHTML property?

I'm trying to learn Javascript and decided to try the innerHTML property myself. But the browser seems to ignore the Javascript code. What am I doing wrong?

 <!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>
like image 209
VaVa Avatar asked Mar 05 '26 00:03

VaVa


1 Answers

Your code should be:

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

'You might not need jQuery' is a short reference of the JavaScript DOM routines vs. jQuery ones.

like image 153
Roman Dibikhin Avatar answered Mar 07 '26 15:03

Roman Dibikhin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!