用于创建 li 并附加到 ol 的 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9107541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript to create an li and append to an ol
提问by Andrew Clear
I'm trying to use JavaScript to create an li and append it to an existing ol. The code I am using is
我正在尝试使用 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");
These should look like:
这些应该看起来像：
1. this is ...
2. this is ...
But look like:
但看起来像：
this is the first changethis is the second change
I have created a fiddle at: fiddle. Thanks for any help.
我在以下位置创建了一个小提琴：fiddle。谢谢你的帮助。
回答by jwchang
Here is an example- jsfiddle
这是一个例子- jsfiddle
$(function() {
var change = function( txt ) {
$("#summaryOL").append( '<li>' + txt + '</li>' );
};
change("this is the first change");
change("this is the second change");
});
To use jquery, put below code inside of <head></head>
要使用 jquery，请将以下代码放在 <head></head> 内
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
回答by Saurabh
Try Below. It worked for me. Remove null from
下面试试。它对我有用。从
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');
}
回答by Maggie
Just looking and this and can't believe it hasn't been answered without jQuery, so just putting it here. In Vanilla JS, you can do:
只是看看这个，不能相信没有 jQuery 就没有答案，所以把它放在这里。在 Vanilla JS 中，您可以执行以下操作：
const ol = document.querySelector("#summaryOL");
const li = document.createElement('li');
const text = document.createTextNode(txt);
li.appendChild(text);
ol.appendChild(li);
or alternatively, by modifying innerHTMLof olnode directly:
或替代地，通过修改innerHTML的ol直接节点：
document.querySelector('#summaryOL').innerHTML =
changes
.map(txt => `<li>${txt}</li>`)
.join('');
回答by Niet the Dark Absol
Your fiddle is not relevant to your question...
你的小提琴与你的问题无关......
In your fiddle, it works fine but you should never have an ID that starts with a number.
在你的小提琴中，它工作正常，但你不应该有一个以数字开头的 ID。
In your question, createElementNSis pointless - just use createElement('li')instead.
在您的问题中，createElementNS毫无意义-只需使用即可createElement('li')。
回答by arun k
If you are using jQuery, you can try this:
如果你使用 jQuery，你可以试试这个：
var item= "<li>" + "some info" + "</li>" ;
$("#items").html($("#items").html() + var);
and obviously appending to the list is another solution.
显然附加到列表是另一种解决方案。
