为什么我不能动态创建html元素？
我想创建动态段落，因此我编写了以下代码。用户单击按钮后，应添加一个新的段落，该段落的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>
潇湘沐浏览 235回答 3
3回答
-
波斯汪
您的代码正在运行，但是正在提交表单，这就是为什么动态增加的价值丢失并刷新页面的原因。为了使其按预期工作，您需要使用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> -
有只小跳蛙
添加type="button"到您的按钮html标签：<!DOCTYPE html><html><head> <title>test</title></head><body> <form> <p> <label>input：</label> <input type="text" class="input"> <button type="button">add</button> </p> </form> <script type="text/javascript"> 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); } } </script></body></html> -
慕尼黑8549860
您可以添加.preventDefault()以防止button刷新页面。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); }}<!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>
随时随地看视频慕课网APP
相关分类
JavaScript