Question

我的有序列表中有这种类型的列表项。

＆＃13;

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

＆＃13;

我想使用javascript插入一个新的列表项。这是我想要做的。

＆＃13;

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);   
			}
		}

＆＃13;

但是上面的脚本无效。

这是整页代码。

＆＃13;

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

＆＃13;

Answer 1

我得到了

js：30 Uncaught TypeError：无法读取属性'appendChild'的null（...）

这是有道理的，因为id="list_containe"缺少r。

Answer 2

将ID 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) {
	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);   
          
            document.getElementById("query_text").value = '';
			}
		}
</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>

使用JavaScript在有序列表中插入列表项

2 个答案: