如何替换div元素的内容?

Question

我想在我的内容中添加多个元素(h1，输入和一些按钮(。所以我写了一个函数，我在其中创建了 h1 和输入，现在我尝试将其添加到我的div 内容中并得到一个错误(类型错误：无法读取未定义的属性"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 = ""在附加孩子之前。

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>

Answer 2

let el = document.getElementById('add');
if (el) {
el.addEventListener('click', function() {
let rootDiv = document.getElementById('content');
addElement(rootDiv);
})
}
function addElement(rootDiv) {
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);
}

<input type="button" id="add" value="Submit" />
<div id="content"></div>

如果您需要不断用新内容替换内容而不是添加内容，则可以在addElement之前添加另一个清除容器的功能。 检查此代码段：

let el = document.getElementById('add');
if (el) {
el.addEventListener('click', function() {
let rootDiv = document.getElementById('content');
clearDiv(rootDiv); // clear container before pasting new content
addElement(rootDiv);
})
}
function addElement(rootDiv) {
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);
}
function clearDiv(div) { // function for clearing rootDiv
while (div.firstChild) {
div.removeChild(div.firstChild);
}
}

<input type="button" id="add" value="Submit" />
<div id="content"></div>