1

我将如何使用创建用户输入的列表createElement()？这样当有人在prompt("enter text")框中添加文本时，它会显示在屏幕上。我试过研究createElement()，但我仍然只能使用变量显示最新的输入。

编辑：

<script>

function myFunction()
{
var user =prompt("Enter your name:")
var text =prompt("Hello " + user + ". Enter some text:")
count++;
document.getElementById("count").innerHTML=count;
document.getElementById("latest").innerHTML=text;
}

</script>

<p>Total: <span id="count">0</span></p>
<p>Latest blocked term: <span id="latest"></span></p>
<button onclick="myFunction()">Click</button>

我已经切断了不相关的部分，所以我希望这可行。

4

3 回答 3

1

每次用户在提示中输入文本时，您都需要创建输入框

function addInput(){
    var text = prompt("");
    var input = document.createElement('input');
    input.value = text;
    document.body.appendChild(input);

}
于 2013-03-21T20:09:28.837 回答
0

超短方式：

function renderInput(){
    document.getElementById("latest").innerHTML += prompt("What is your name?") + "<br />";
}

使用您的示例：

<script>
    function myFunction() {
        document.getElementById("latest").innerHTML += prompt("Enter some text:") + "<br />";
    }
</script>

<p>Latest text: <span id="latest"></span></p>
于 2013-03-21T20:17:08.463 回答
0

您在这里有两个选择。

DOM 方式

这是您使用 搜索的方式createElement。从某种意义上说，这是最好的方式，因为它允许您与已经存在的 DOM 进行交互。但是，您不需要 createElement：您应该真正使用createTextNode，它会按照锡上的说明进行操作：

function myFunction() {
    var name = prompt("Enter some text:"),
        node = document.createTextNode(name);
    document.getElementById('latest').appendChild(node);
}

jsFiddle 示例

（这导致将文本添加到元素的末尾：它不会删除已经存在的内容。）

现实的方式

虽然使用 DOM 函数很好，但它并不是真正地道的 Javascript。实际上，innerHTML是您可能应该使用的属性。浏览器非常擅长解析 HTML（毕竟这是它们的目的！）所以这几乎肯定会比 DOM 方法更快。

function myFunction() {
    var name = prompt("Enter some text:");
    document.getElementById('latest').innerHTML = name; // to overwrite the existing contents
    document.getElementById('latest').innerHTML += name; // to add to the existing contents
}

jsFiddle 示例

还有其他方法，例如 using createDocumentFragment，但几乎可以肯定第二种方法是您要走的路。

于 2013-03-21T20:27:01.617 回答