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

Question

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>

It's document.getElementById() - you have to call it as a method of the document object. — Pointy
– Pointy, Commented Oct 4, 2015 at 13:34
Also you're trying to put an <li> inside the <li> that's already there - the replacement text should just be "chicken". — Pointy
– Pointy, Commented Oct 4, 2015 at 13:35

Roman Dibikhin · Accepted Answer · 2015-10-04 13:42:04Z

5

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.

answered Oct 4, 2015 at 13:42

Roman Dibikhin

8564 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related