我想创建动态段落，所以我写了下面的代码。用户点击按钮后，应该添加一个新的段落，其 innerText 是用户的输入。但是我失败了，有没有人可以帮助我？
var input = document.querySelector(".input");
var btn = document.querySelector("button");
var body = document.querySelector("body");
btn.addEventListener('click', addParagraph);
function addParagraph() {
var childELes = body.children;
for (var p in childELes) {
if (p.tagName === "p")
p.remove();
}
if (input.value.trim() != "") {
var newPara = document.createElement("p");
newPara.innerText = input.value;
body.appendChild(newPara);
}
}<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form>
<p>
<label>input：</label>
<input type="text" class="input">
<button>add</button>
</p>
</form>
</body>
</html>最佳答案
您的代码正在运行，但正在提交表单，这就是动态添加的值丢失并刷新页面的原因。要使其按预期工作，您需要使用 e.preventDefault(); 来阻止提交表单:
var input = document.querySelector(".input");
var btn = document.querySelector("button");
var body = document.querySelector("body");
btn.addEventListener('click', addParagraph);
function addParagraph(e) {
e.preventDefault();
var childELes = body.children;
for (var p in childELes) {
if (p.tagName === "p")
p.remove();
}
if (input.value.trim() != "") {
var newPara = document.createElement("p");
newPara.innerText = input.value;
body.appendChild(newPara);
}
}<form>
<p>
<label>input：</label>
<input type="text" class="input">
<button>add</button>
</p>
</form>关于javascript - 为什么我不能动态创建 html 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55571722/