使用createElement（）创建输入列表

Question

如何使用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>

我切断了不相关的部分，所以我希望这有效。

Answer 1

每次用户在提示符

中输入文本时，您都需要创建输入框

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

}

Answer 2

超短路：

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>

Answer 3

这里有两个选择。

DOM方式

这是您使用createElement搜索的方式。从某种意义上说，这是最好的方式，因为它允许您与已经存在的DOM进行交互。但是，你不需要 {/ em> createElement：你应该真正使用createTextNode，这就像它在锡上所做的那样：

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

jsFiddle example

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

现实的方式

虽然使用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 example

还有其他方法，例如使用createDocumentFragment，但第二种方法几乎肯定是您的选择。