如何在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.