我正在尝试使用JavaScript创建一个li并将其附加到现有的ol。我正在使用的代码是
<ol id=summaryOL>
</ol>
function change(txt) {
var x=document.getElementById("summaryOL");
newLI = document.createElementNS(null,"li");
newText = document.createTextNode(txt);
newLI.appendChild(newText);
x.appendChild(newLI);
}
change("this is the first change");
change("this is the second change");
这些应该是这样的：
1. this is ...
2. this is ...
但看起来像：
this is the first changethis is the second change
我创造了一个小提琴：fiddle。谢谢你的帮助。
这是an example - jsfiddle
$(function() {
var change = function( txt ) {
$("#summaryOL").append( '<li>' + txt + '</li>' );
};
change("this is the first change");
change("this is the second change");
});
要使用jquery，请将以下代码放在<head> </ head>中
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
试试下面。它对我有用。从中删除null
newLI = document.createElementNS(null,"li");
function change(txt) {
var x=document.getElementById("summaryOL");
newLI = document.createElement("li");
newText = document.createTextNode(txt);
newLI.appendChild(newText);
x.appendChild(newLI);
alert('DONE');
}
你的小提琴与你的问题无关......
在你的小提琴中，它工作正常，但你永远不应该有一个以数字开头的ID。
在你的问题中，createElementNS毫无意义 - 只需使用createElement('li')。
只是看着这个，并且不能相信没有jQuery没有回答，所以只需把它放在这里。在Vanilla JS中，您可以：
const ol = document.querySelector("#summaryOL");
const li = document.createElement('li');
const text = document.createTextNode(txt);
li.appendChild(text);
ol.appendChild(li);
或者，通过直接修改innerHTML节点的ol：
document.querySelector('#summaryOL').innerHTML =
changes
.map(txt => `<li>${txt}</li>`)
.join('');
如果您使用的是jQuery，可以试试这个：
var item= "<li>" + "some info" + "</li>" ;
$("#items").html($("#items").html() + var);
并且明显附加到列表是另一种解决方案。