gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 13:56:35 24 4
gpt4 key购买 nike

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

<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

关于javascript - 使用 JavaScript 在有序列表中插入列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40661587/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com