清空元素的innerHTML会清空整个页面

Question

我有这个测试程序，我写的只是为了对Javascript充满信心。现在我只对客户端脚本感兴趣，所以我不需要PHP，我只想编写一个能够读取某些文本字段的值并使用它做一些事情的脚本。

我已经定义了一个类构造函数Person，能够保存属性name，surname和age。使用函数getDescription()能够返回该人的完整描述。我从单个元素的数组开始，当用户按下按钮时我读取文本字段值，可能创建一个Person对象（如果字段输入正确），并使用{{1}添加人物描述id为“people”的元素的属性。这是代码：

innerHTML

问题是，当我点击按钮时，新人会被添加，但按钮会消失。这是在按下按钮之前：

之后：

那么，为什么当我将“people”的内部HTML设置为空字符串时，其他内容也会消失？

Answer 1

你不应该在showPeople（）函数中使用函数document.write，它在整个网页的当前文档中写入HTML内容。

您还需要向标识为people的HTML文档添加新元素，因为它不存在：

<div id="people"></div>

请使用字符串追加您需要的内容，然后设置元素的innerHTML。

功能showPeople()的更新版本：

function showPeople(persons) {
    var personDesc = "";
    for(var i=0; i<persons.length; i++) {
        personDesc += "<p>";
        personDesc += people[i].getDesciption();
        personDesc += "</p>";
    }
    document.getElementById('people').innerHTML = personDesc;
}

Answer 2

此外，<p id="People"> <p> your people </p> </p>无效，您最好将外部p设为div。