Вставить элемент списка в упорядоченный список с использованием JavaScript

У меня есть этот тип элемента списка в моем упорядоченном списке.Вставить элемент списка в упорядоченный список с использованием JavaScript

<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>

Я хочу, чтобы вставить новый элемент списка с помощью JavaScript. Вот что я пытаюсь сделать.

window.onkeypress = function(event) { 
 
    if (event.keyCode == 13) { 
 
\t function1(); 
 
    } 
 
} 
 
function function1() { 
 
\t \t var str = document.getElementById("query_text").value; 
 
\t \t if (str.length == 0) { 
 
\t \t   return; 
 
\t \t } else { 
 
\t \t  \t var ol = document.getElementById("list_container"); 
 
\t \t   var li = document.createElement("li"); 
 
\t \t \t 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>'; 
 
\t \t \t ol.appendChild(li); 
 
\t \t \t } 
 
\t \t }

Но выше сценарий не работает.

Это код для всей страницы.

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
 

 
<script type="text/javascript"> 
 

 
window.onkeypress = function(event) { 
 
    if (event.keyCode == 13) { 
 
\t function1(); 
 
    } 
 
} 
 
function function1() { 
 
\t \t var str = document.getElementById("query_text").value; 
 
\t \t if (str.length == 0) { 
 
\t \t   return; 
 
\t \t } else { 
 
\t \t  \t var ol = document.getElementById("list_container"); 
 
\t \t   var li = document.createElement("li"); 
 
\t \t \t 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>'; 
 
\t \t \t ol.appendChild(li); 
 
\t \t \t } 
 
\t \t } 
 
</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 a new update about this chat UI with more responsive elements! Check it 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>

источник

2016-11-17 Mujeebul Hasan

Что именно не работает? Любые ошибки в консоли? Каким будет ожидаемый результат? – empiric

js:30 Uncaught TypeError: Cannot read property 'appendChild' of null(…)

Это имеет смысл, потому что id="list_containe" пропускает r.

источник

2016-11-17 17:43:31 Halcyon

Исправленный идентификатор list_containe к list_container и очистное вход на добавление нового элемента

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
 

 
<script type="text/javascript"> 
 

 
window.onkeypress = function(event) { 
 
    if (event.keyCode == 13) { 
 
\t function1(); 
 
    } 
 
} 
 
function function1() { 
 
\t \t var str = document.getElementById("query_text").value; 
 
\t \t if (str.length == 0) { 
 
\t \t   return; 
 
\t \t } else { 
 
\t \t  \t var ol = document.getElementById("list_container"); 
 
\t \t   var li = document.createElement("li"); 
 
\t \t \t 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>'; 
 
\t \t \t ol.appendChild(li); 
 
      
 
      document.getElementById("query_text").value = ''; 
 
\t \t \t } 
 
\t \t } 
 
</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_container" 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 a new update about this chat UI with more responsive elements! Check it 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>

источник

2016-11-17 17:45:47 mrid

Объясните, что это означает? – marcusshep

Вставить элемент списка в упорядоченный список с использованием JavaScript

ответ

Смежные вопросы