如何在javascript中使用ID将文本附加到div？
[英]How to append text to div using ID in javascript?
问题描述
在这里，我使用函数将值打印到id="mylist" div 中。我正在使用循环并使用该值调用printList()函数，并且我正在打印printList()的值，但它不起作用。如何我这样做？
<div id="mylist"></div>
Javascript：
function coucity(){
for (var i = 0; i < 10; i++) {
printList(i);
}
}
function printList(city){
var writecity = document.write(city);
document.getElementById("mylist").append(writecity);
}
而且我还想为打印值添加延迟。
4 个解决方案
解决方案1
2 已采纳 2015-06-10 08:38:04
var writecity = document.createTextNode(city);
document.getElementById("mylist").appendChild(writecity);
这应该有效。
基本上，您只需将其他 DOM 节点（作为子节点）附加到 DOM 节点。 因此您使用document.createTextNode()创建节点并使用document.appendChild()将其作为子节点添加到现有节点。
解决方案2
0
问题是document.write什么都不返回，也不推荐使用它。 其次 dom 没有函数append ，而是appendChild 。
尝试document.createTextNode和appendChild ：
function coucity() { for (var i = 0; i < 10; i++) { printList(i); } } function printList(i) { document.getElementById("mylist").appendChild(document.createTextNode(i)); }
<body onload="coucity();"> <div id="mylist"></div> </body>
您也可以尝试innerHTML ：
function coucity() { for (var i = 0; i < 10; i++) { printList(i); } } function printList(i) { document.getElementById("mylist").innerHTML += i; }
<body onload="coucity();"> <div id="mylist"></div> </body>
解决方案3
0 2015-06-10 08:41:03
您的代码有一些问题，所有这些都可以通过检查 JavaScript 控制台轻松找到。
- 你不会在任何地方调用
coucity（但评论显示它是从其他地方调用的，所以这应该不是问题） -
document.write应该是document.createTextNode -
getElementById("myDIV")找不到 ID 为mylist的 div -
append应该是appendChild - 最后，如果您更正所有这些错误，它只会输出数字 0 到 9 而不是城市。
我不能帮你的最后一个，但与纠正其他错误，这里是结果。
function coucity(){
for (var i = 0; i < 10; i++) {
printList(i);
}
}
function printList(city){
var writecity = document.createTextNode(city);
document.getElementById("mylist").appendChild(writecity);
}
coucity();
要添加延迟，有几种方法可用。 哪个最好取决于您的需求。 在这个简单的例子中，你甚至可以写
function coucity(){
for (var i = 0; i < 10; i++) {
setTimeout(printList, i*1000, i);
}
}
请参阅更新的小提琴。
解决方案4
0 2015-06-10 08:53:18
将文本节点附加到div的示例， 由 id 引用，并具有延迟。
function appendDelayedTextNode(element, text, delayMs) { setTimeout(function () { element.appendChild(document.createTextNode(text)); }, delayMs); } var mylist = document.getElementById('mylist'); appendDelayedTextNode(mylist, 'one', 1000); appendDelayedTextNode(mylist, 'two', 2000); appendDelayedTextNode(mylist, 'three', 3000);
<div id="mylist"></div>
如何使用D3JS JavaScript将元素附加到具有ID的div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.