使用JavaScript在有序列表中插入列表项
Insert List Item in an Ordered List using 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) {
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);
}
}
但是上面的脚本不起作用
这是整个页面的代码。
<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>
我得到
js:30 Uncaught TypeError: Cannot read property 'appendChild' of null(…)
这是有意义的,因为id="list_containe"
缺少r
。
将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>
相关文章:
- 如何将对象插入对象列表的开头,当它有 unshift 不是函数错误
- Meteor:从Twilio获取SMS文本列表,并将它们插入mongoDB
- 如何在 jquery 中插入一个欠量列表
- 如何在 Javascript 中将字符串数组列表插入到表行中
- 在列表项中插入错误值的文本输入
- 动态选择列表AJAX和插入数据库表通过张贴形式
- 插入按字母顺序、javascript或jquery排序的新列表
- 在自动完成列表中插入数组值
- 在AngularJS中插入后重新加载列表
- 动态嵌套列表:单击时插入行,在当前元素之后
- 选择列表的汽车,将值插入饼干 - jQuery
- 使用 javascript 在两个列表项之间插入下拉项
- 在下拉列表中选择一个类别并使用文本框插入 vlue
- 如何在项目符号列表中插入背景(图片)元素,其 URL 写入相邻的项目符号列表中
- AngularJS:插入新项目后对列表重新排序
- ng-click似乎不适用于以编程方式插入的列表(li)元素
- 当存在粘性标头时隐藏下拉列表“插入符号”
- 语法高亮 Javascript 在 LyX 中,插入子程序列表>
- 在应用程序启动时生成路由 URL 列表,并插入到 MVC 中的 javascript 文件中
- 将列表插入到数组中