如何在javascript中使用ID将文本附加到div？
[英]How to append text to div using ID in javascript?
问题描述
Here i am using function to print the values to div with id="mylist" .i am using the loop and calling the printList() function with the value and i am printing the value in printList() but its not working.how can i do this?
在这里，我使用函数将值打印到id="mylist" div 中。我正在使用循环并使用该值调用printList()函数，并且我正在打印printList()的值，但它不起作用。如何我这样做？
<div id="mylist"></div>
Javascript: 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);
}
and also i want to add delay for printing the values.而且我还想为打印值添加延迟。
4 个解决方案
解决方案1
2 已采纳 2015-06-10 08:38:04
var writecity = document.createTextNode(city);
document.getElementById("mylist").appendChild(writecity);
This should work.这应该有效。
Basically, you only append other DOM Node (as child) to DOM Nodes.基本上，您只需将其他 DOM 节点（作为子节点）附加到 DOM 节点。 so you use document.createTextNode() to create node and document.appendChild() to add it as a child to existing node.因此您使用document.createTextNode()创建节点并使用document.appendChild()将其作为子节点添加到现有节点。
解决方案2
0
Problem is document.write returns nothing, also using it is not recommended.问题是document.write什么都不返回，也不推荐使用它。 Secondly dom does not have function append , instead it is appendChild .其次 dom 没有函数append ，而是appendChild 。
Try document.createTextNode and 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>
You may also try innerHTML :您也可以尝试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
There are a couple of things wrong with your code, all of which can easily be found out by checking the JavaScript console.您的代码有一些问题，所有这些都可以通过检查 JavaScript 控制台轻松找到。
- You don't call
coucityanywhere (but a comment shows that is is called from elsewhere, so that shouldn't be the problem)你不会在任何地方调用coucity（但评论显示它是从其他地方调用的，所以这应该不是问题） -
document.writeshould bedocument.createTextNodedocument.write应该是document.createTextNode -
getElementById("myDIV")does not find the div with idmylistgetElementById("myDIV")找不到 ID 为mylist的 div -
appendshould beappendChildappend应该是appendChild - and finally, if you correct all these errors, it only outputs the digits 0 through 9 instead of cities.最后，如果您更正所有这些错误，它只会输出数字 0 到 9 而不是城市。
I can't help you with the last one, but with the other errors corrected, here is the result.我不能帮你的最后一个，但与纠正其他错误，这里是结果。
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();
To add a delay, there are several methods available.要添加延迟，有几种方法可用。 Which would be best depends on your needs.哪个最好取决于您的需求。 In this simple case, you can even write在这个简单的例子中，你甚至可以写
function coucity(){
for (var i = 0; i < 10; i++) {
setTimeout(printList, i*1000, i);
}
}
See updated fiddle .请参阅更新的小提琴。
解决方案4
0 2015-06-10 08:53:18
An example of appending a text node to a div , referenced by id , with a delay . 将文本节点附加到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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.