javascript - 如何替换div元素的内容？

Question

我想在我的内容中添加多个元素(h1、输入和一些按钮)。所以我写了一个函数，我在其中创建了 h1 和输入，现在我尝试将它添加到我的 div 内容并得到一个错误(TypeError:无法读取未定义的属性'appendChild')。这是我的代码:

let el = document.getElementById('add');
if (el) {
    el.addEventListener('click', function () {
        let rootDiv = document.getElementById('content');
        rootDiv.innerHTML = addElement();
    })
}

function addElement() {
    let h = document.createElement("H1");
    let t = document.createTextNode("Add task");
    h.appendChild(t);
    let input = document.createElement('INPUT');
    document.rootDiv.appendChild(h);
    document.rootDiv.appendChild(input);
}

Answer 1

没有这样的 document.rootDiv 可以在其上实现 appenChild()。

您可以将子元素直接附加到容器元素。您不需要设置 innerHTML。只需调用该函数即可。

要清除现有内容，您可以使用element.innerHTML = "" 在追加 child 之前。

let el = document.getElementById('add');;
if (el) {
  el.addEventListener('click', function () {
    addElement();
  });
}

function addElement() {
  let rootDiv = document.getElementById('content')
  rootDiv.innerHTML = "";
  let h = document.createElement("H1");
  let t = document.createTextNode("Add task");
  h.appendChild(t);
  let input = document.createElement('INPUT');
  rootDiv.appendChild(h);
  rootDiv.appendChild(input);
}

<button id="add">Add</button>
<div id="content"> <h1>Simple TODO application</h1> <a href="#addNewItem"><button id="add">Add new task</button></a> <p>TODO is empty</p> <h1></h1> 
</div>