How to append text to div using ID in javascript?
Question
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?
<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);
}
and also i want to add delay for printing the values.
4 answers
solution1
2 ACCPTED 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. so you use document.createTextNode() to create node and document.appendChild() to add it as a child to existing node.
solution2
0
Problem is document.write returns nothing, also using it is not recommended. Secondly dom does not have function append , instead it is appendChild .
Try document.createTextNode and 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 :
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>
solution3
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.
- You don't call
coucityanywhere (but a comment shows that is is called from elsewhere, so that shouldn't be the problem) -
document.writeshould bedocument.createTextNode -
getElementById("myDIV")does not find the div with idmylist -
appendshould beappendChild - and finally, if you correct all these errors, it only outputs the digits 0 through 9 instead of cities.
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 .
solution4
0 2015-06-10 08:53:18
An example of appending a text node to a div , referenced by id , with a delay .
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.