html - Insert List Item in an Ordered List using JavaScript -
i have type of list item in ordered list.
<li class="other"> <div class="avatar"><img src="http://i.imgur.com/dy6gnd0.png" draggable="false"/></div> <div class="msg"> <p>copón</p> <p><emoji class="funny"/></p> <time>18:08</time> </div> </li>i want insert new list item using javascript. here trying do.
window.onkeypress = function(event) { if (event.keycode == 13) { function1(); } } function function1() { var str = document.getelementbyid("query_text").value; if (str.length == 0) { return; } else { var ol = document.getelementbyid("list_container"); var li = document.createelement("li"); li.innerhtml = '<div class="avatar"><img src="http://i.imgur.com/dy6gnd0.png" draggable="false"/></div><div class="msg"><p>copón</p><p><emoji class="funny"/></p><time>18:08</time></div>'; ol.appendchild(li); } }but above script not working.
this whole page code.
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script type="text/javascript"> window.onkeypress = function(event) { if (event.keycode == 13) { function1(); } } function function1() { var str = document.getelementbyid("query_text").value; if (str.length == 0) { return; } else { var ol = document.getelementbyid("list_container"); var li = document.createelement("li"); li.innerhtml = '<div class="avatar"><img src="http://i.imgur.com/dy6gnd0.png" draggable="false"/></div><div class="msg"><p>copón</p><p><emoji class="funny"/></p><time>18:08</time></div>'; ol.appendchild(li); } } </script> </head> <body> <div class="menu"> <div class="back"><i class="fa fa-chevron-left"></i> <img src="http://i.imgur.com/dy6gnd0.png" draggable="false"/></div> <div class="name">alex</div> <div class="last">18:09</div> </div> <ol id="list_containe" class="chat"> <li class="other"> <div class="avatar"><img src="http://i.imgur.com/dy6gnd0.png" draggable="false"/></div> <div class="msg"> <p>copón</p> <p><emoji class="funny"/></p> <time>18:08</time> </div> </li> <li class="self"> <div class="avatar"><img src="http://i.imgur.com/hycn9xo.png" draggable="false"/></div> <div class="msg"> <p>hey there's new update chat ui more responsive elements! check now:</p> <p><a href="http://codepen.io/varo/pen/ypmwpq" target="parent">chat ui 2.0</a></p> <time>18:09</time> </div> </li> </ol> <input class="textarea" id="query_text" type="text" placeholder="type here!"/><div class="emojis"></div> </body> </html>
i get
js:30 uncaught typeerror: cannot read property 'appendchild' of null(…)
that makes sense because id="list_containe" missing r.
Comments
Post a Comment