Почему я не могу динамически создавать html-элемент?
Я хочу создать динамический абзац, поэтому я написал следующий код. После того, как пользователь нажмет кнопку, должен быть добавлен новый абзац, внутренний текст которого является вводом пользователя. Но мне не удалось, кто-нибудь может мне помочь?
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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Ваш код работает, но форма отправляется, поэтому динамически добавляемое значение теряется и страница обновляется. Чтобы заставить его работать так, как вы ожидаете, вам нужно использовать 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>Это потому, что кнопка в форме вызывает submit и перезагружает страницу. Вы видите новый p-tag на короткое время. Но страница перезагружается и все p пропало.
Добавьте type = "button" к своей кнопке, чтобы исключить ее как кнопку отправки, или используйте event.preventDefault() в событии кнопки.
Ваш код на 100% правильный, единственная проблема заключается в том, что ваш <button>add</button> выполняет обратную передачу, которая обновляет вашу страницу.
Вам просто нужно добавить тип кнопки в тег кнопки, и она будет работать следующим образом:
<button type = "button">add</button>
Надеюсь это поможет
Вы можете просто добавить .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>function addParagraph(e) {
e.preventDefault();
var a = document.getElementById("inserted-p");
if (a != null) {a.remove();}
if (input.value.trim() != "") {
var newPara = document.createElement("p");
newPara.id = "inserted-p";
newPara.innerText = input.value;
body.appendChild(newPara);
}
}
Ваша форма отправляется, поэтому предотвратите ее, позвонив
e.preventDefault()Ваше удаление не работает, потому что
pне является прямым потомкомbody, поэтому исправьте это, добавивidк вставленному элементу и удалив тег с помощью правильного селектора.
Просто добавьте
.preventDefault()при работе с кликами jsfiddle.net/ta9pxbLc/1