Question

这里我使用函数将值打印到div id="mylist"。我正在使用循环并使用值调用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);
 }

我还希望为打印值添加延迟。

Answer 1

var writecity = document.createTextNode(city);
document.getElementById("mylist").appendChild(writecity);

这应该有用。

基本上，您只将其他DOM节点（作为子节点）附加到DOM节点。因此，您可以使用document.createTextNode()创建节点，并使用document.appendChild()将其作为子节点添加到现有节点。

Answer 2

问题是document.write什么都不返回，也不推荐使用它。其次，dom没有函数append，而是appendChild。

尝试document.createTextNode和appendChild：

＆＃13;

function coucity() {
  for (var i = 0; i < 10; i++) {
    printList(i);
  }
}

function printList(i) {
  document.getElementById("mylist").appendChild(document.createTextNode(i));
}

＆＃13;

<body onload="coucity();">
  <div id="mylist"></div>
</body>

＆＃13;

您也可以尝试innerHTML：

＆＃13;

function coucity() {
  for (var i = 0; i < 10; i++) {
    printList(i);
  }
}

function printList(i) {
  document.getElementById("mylist").innerHTML += i;
}

＆＃13;

<body onload="coucity();">
  <div id="mylist"></div>
</body>

＆＃13;

Answer 3

您的代码存在一些问题，通过检查JavaScript控制台可以轻松找到所有这些内容。

你没有在任何地方调用coucity（但评论显示是从其他地方调用的，所以这不应该是问题）
document.write应为document.createTextNode
getElementById("myDIV")找不到ID为mylist
append应为appendChild
最后，如果你纠正了所有这些错误，它只输出数字0到9而不是城市。

我无法帮助您使用最后一个，但在更正其他错误的情况下，here就是结果。

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);
    }
}

请参阅updated fiddle。

Answer 4

appending一个text node到div，referenced by id，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>

如何在javascript中使用ID将文本附加到div？

4 个答案: