javascript - 为什么这个脚本只给出一半的输出？

Question

这是功能：

function funct1()
{
    document.getElementById("demo").innerHTML="Something";
    document.write("Mexico!");
}

输出只有：

Mexico

当我单击页面上的按钮时，我希望输出为：

Something
Mexico

Answer 1

在这种情况下document.write()，不会按照您的想法行事。它清除文档的内容，并写入Mexico!（有关原因的更详细解释，请参阅 Quentin 的回答）。如果删除此行，您可以看到您的第一条语句已正确执行。

如果要更新第一段并添加另一个，则应使用以下代码：

function funct1()
{
    document.getElementById("demo").innerHTML = "Something";  

    // Create a new <p> element, set its HTML and then append it:
    var newP = document.createElement('p');
    newP.innerHTML = 'Mexico!';
    document.body.appendChild(newP);
}

你可以在这里看到一个工作的jsFiddle。

Answer 2

设置好innerHTMLdemo后，调用document.write. 由于此时文档处于关闭状态，这会进行隐式调用，document.open从而擦除整个现有文档（包括您刚刚分配的内容innerHTML）。然后你写墨西哥！到新文档。

切勿document.write在 DOM 准备好后调用（并避免在其他任何时间这样做）。请改用 DOM 操作。