What is wrong with my JavaScript script code here?

Question

JavaScript code:

   <script type="text/javascript">
                var listitems = document.getElementsByTagName('ul')[0];
                var newListItem = document.createElement('li');
                var newListItemText = document.createTextNode('Tutorials');
                newListItem.appendChild(newListItemText);
                listitems.appendChild(newListItem);

            </script>

HTML Code:

        <body>
        <div class="2div">
        <div id="navigator">
            <nav >
                <ul class="nav_menu">
                    <li><a href="/homepage.html">Home</a></li>
                    <li><a href="/Projects.html">Projects</a></li>
                    <li><a href="/Contact.html">Contact Info</a></li>
                </ul>
            </nav>
        </div>

        <div id="aboutme">
            <body>
                <p> This section will contain basic info about me</p>
            </body>
        </div>


    </div>

The error I'm receiving on my chrome console is this:

Uncaught TypeError: Cannot read property 'appendChild' of undefined

Sounds like you are trying to find the element before it is on the page. — epascarello, Jul 29 '15 at 19:37
Check listitems if is undefined before to use it. Log it and you see that it's undefined. — alifirat, Jul 29 '15 at 19:38
Is your Javascript located above or below the HTML? It needs to be below so that the `ul` tag will exist. — David, Jul 29 '15 at 19:39
The HTML you added doesn't contain ul element. Please edit your question if it wasn't your purpose — Eyal Ofri, Jul 29 '15 at 19:39
wow i understand. So i should start the script with $(document).ready(function... ) then? I kept searching if the appendChild() has been depreciated but it is still used. So the script should actually occur after the list has been created. — Ali Aslam, Jul 29 '15 at 19:45

score 1 · Answer 1 · answered Jul 29 '15 at 19:43

1

Your probably loading the js file before the HTML so the ul element wasn't rendered yet.

You can use jQuery's $(document).ready(function(){..Your code}) to fix it.

answered Jul 29 '15 at 19:43

Eyal Ofri

680
10
16

score 0 · Answer 2 · answered Jul 29 '15 at 19:42

Just add the onload function because you are working on HTML elements which are not in the DOM yet :

window.onload = function foo() {

var listitems = document.getElementsByTagName('ul')[0];
                var newListItem = document.createElement('li');
                var newListItemText = document.createTextNode('Tutorials');
                newListItem.appendChild(newListItemText);
                listitems.appendChild(newListItem);

}

See the result here : https://jsfiddle.net/vdf61qnw/

score 0 · Answer 3 · answered Jul 29 '15 at 19:44

There is no 'ul' in your html so

document.getElementsByTagName('ul')[0] == null

Therefore listitems is null and cannot be appended to. This should append your JavaScript created elements:

   <script type="text/javascript">
            var body = document.getElementsByTagName('body');
            var listitems = document.createElement('ul');
            var newListItem = document.createElement('li');
            var newListItemText = document.createTextNode('Tutorials');
            newListItem.appendChild(newListItemText);
            listitems.appendChild(newListItem);
            body.appendChild(listitems);
   </script>

What is wrong with my JavaScript script code here?

3 Answers3