如何在单页应用程序中使用javascript重复更新HTML对象？

这绝对是个初学者的问题。我正在我的第一个单页应用程序网站上学习JS。我遵循dcode中的这一伟大原则。index.html的重要部分如下所示：

<div id="main-content"></div>
<script type="module" src="/js/index.js"></script>

有一个AbstractView.js，由以下部分组成：

export default class {
    constructor(params) { this.params = params; }
    async getHtml() { return ""; }
    async getAction() { }
}

所有视图都继承自AbstractView，并以这种方式编写：

import AbstractView from "./AbstractView.js";

export default class extends AbstractView {
    constructor(params) {
        super(params);
    }

    async getHtml() {
        let output = ``;
        output += `<form class="form" id="myForm">`;
        output += `<label for="input_name">Name</label>`;
        output += `<input type="text" name="input_name" id="input_name">`;
        output += `<button type="submit" id="button_submit">Submit</button>`;
        output += `</form >`;
        return output;
    }

    async getAction() {
        let formSubmit = document.querySelector('#button_submit');
        let formName = document.querySelector('#input_name');
        let divMainContent = document.querySelector('#main-content');
        formSubmit.addEventListener('click', doSomething);

        function doSomething(event) {
            event.preventDefault();
            let output = ``;
            output += `<h1>Success!</h1>`;
            divMainContent.innerHTML = output;
        }
    }
}

从“/AbstractView.js”导入AbstractView；
导出默认类扩展了AbstractView{
构造函数（参数）{
超级（params）；
}
异步getHtml（）{
让输出=``；
输出+=``；
输出+=`Name`；
输出+=``；
输出+=`Submit`；
输出+=``；
返回输出；
}
异步getAction（）{
让formSubmit=document.querySelector（“#按钮_submit”）；
让formName=document.querySelector（“#input_name”）；
让divMainContent=document.querySelector（“#main content”）；
formSubmit.addEventListener（'click'，doSomething）；
功能剂量测量（事件）{
event.preventDefault（）；
让输出=``；
输出+=`成功！`；
divMainContent.innerHTML=输出；
}
}
}

通常，使用getHtml（）创建带有ID（如div、input等）的表单元素并使用getAction（）读取/处理它们就足够了。有时我还需要等待用户填写表单的一部分、修改表单、等待用户填写表单的另一部分等等，然后再处理数据。不幸的是，如果我使用getAction（）添加一个id为的新html元素，我将无法读取它的值，因为在执行getHtml（）后，id不存在。我想做的是：

1. Create <input id="first"> with getHtml()
2. Read the #first input value with event listener
3. If #first == "Something" create <input id="second"> with innerHtml
4. Read the #second input value with event listener
5. If #second == "Something" create <input id="third"> with innerHtml
(...)
n. Read the #nth input value
n+1. Process all the data.

1。使用getHtml（）创建
2.使用事件侦听器读取#第一个输入值
3.如果#first==“Something”使用innerHtml创建
4.使用事件侦听器读取#第二个输入值
5.如果#second==“Something”使用innerHtml创建
(...)
N读取第n个输入值
n+1。处理所有数据。

如何反复修改和读取更新的html及其新添加的元素、ID和值？例如，是否可以从子函数执行getAction（）函数

1. Create <input id="first"> with getHtml()
2. Read the #first input value with event listener
3. If #first == "Something" create <input id="second"> with innerHtml
4. Read the #second input value with event listener
5. If #second == "Something" create <input id="third"> with innerHtml
(...)
n. Read the #nth input value
n+1. Process all the data.