eldan88 Posted November 13, 2013 Share Posted November 13, 2013 Hey Guys. I just ran into another small challenge. I am trying to add a new element using the DOM, just so that I can get the hang of things. I know it seems very basic, but for some reason it doesn't seem to be working for me. All I am trying to do, Is simple add a new li with the innerHTML called "this is some text". I know that innerHTML is not the best way of adding text nodes, but I just want to start with innerHTML, before working with text nodes. Any advice as to why its not working for me? Below is my code! Thanks <!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> var list = document.getElementById("list_items"); var myNewElement = document.createElement("li"); myNewElement.innerHTML = "This is some new text"; list.appendChild("myNewElement"); </script> </head> <body> <ul id="list_items"> <li>Test 1 </li> </ul> </body> </html> Link to comment https://forums.phpfreaks.com/topic/283870-need-help-adding-an-li-tag-using-dom/ Share on other sites More sharing options...
dalecosp Posted November 13, 2013 Share Posted November 13, 2013 I *think* the problem is that the script is executing before the DOM is loaded, and therefore "list" is null.I'll take a look at a new snippet. Link to comment https://forums.phpfreaks.com/topic/283870-need-help-adding-an-li-tag-using-dom/#findComment-1458134 Share on other sites More sharing options...
dalecosp Posted November 13, 2013 Share Posted November 13, 2013 Hmm, it was either that, or the other problem: you fed a string instead of an object to appendChild.This seems to work OK: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function myFunct () { //a function; we'll call it once the DOM loads. 'use strict'; var list, myNewElement; list = document.getElementById("list_items"); myNewElement = document.createElement("li"); myNewElement.innerHTML = "This is some new text"; list.appendChild(myNewElement); // not "myNewElement", which is a string, but the obj/var itself } </script> </head> <body onload="javascript:myFunct();"> <ul id="list_items"> <li>Test 1 </li> </ul> </body> </html> Link to comment https://forums.phpfreaks.com/topic/283870-need-help-adding-an-li-tag-using-dom/#findComment-1458135 Share on other sites More sharing options...
eldan88 Posted November 14, 2013 Author Share Posted November 14, 2013 Hey dalecosp! You where correct. The script executed before the DOM loaded and I fed the sting into appendChild. I have corrected and not it works! Thank you! Link to comment https://forums.phpfreaks.com/topic/283870-need-help-adding-an-li-tag-using-dom/#findComment-1458253 Share on other sites More sharing options...
dalecosp Posted November 14, 2013 Share Posted November 14, 2013 Thanks ... you're welcome. Link to comment https://forums.phpfreaks.com/topic/283870-need-help-adding-an-li-tag-using-dom/#findComment-1458259 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.