Блог

Главная - Вопросы по программированию - Почему я не могу создать html-элемент динамически?

Почему я не могу создать html-элемент динамически?

#javascript #html

#javascript #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>

Комментарии:

1. Просто добавляйте .preventDefault() при работе с кликами jsfiddle.net/ta9pxbLc/1

Ответ №1:

Ваш код работает, но форма отправляется, поэтому динамически добавляемое значение теряется, а страница обновляется. Чтобы заставить его работать так, как вы ожидаете, вам нужно использовать 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>

Ответ №2:

Добавьте type="button" в свой html-тег button:

 <!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>

Ответ №3:

Вы можете просто добавить, .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>

Ответ №4:

Это потому, что кнопка в форме вызывает submit и перезагружает страницу. Вы видите новое p-tag в течение короткого времени. Но страница перезагружается, и все p исчезло.

Добавьте type="button" к вашей кнопке, чтобы исключить ее как кнопку отправки или использовать event.preventDefault() в вашем событии кнопки.

Ответ №5:

Ваш код на 100% корректен, единственная проблема заключается в том, что вы <button>add</button> выполняете обратную отправку, которая обновляет вашу страницу.

Вам просто нужно добавить тип кнопки в свой тег button, и он будет работать следующим образом:

<button type="button">add</button>

Надеюсь, это поможет

Ответ №6:

 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);
  }
}

  1. Ваша форма отправляется, поэтому предотвратите это, вызвав e.preventDefault()

  2. Ваше удаление не работает, потому что p не является прямым дочерним элементом body , поэтому исправьте это, добавив id к вашему вставленному элементу и удалив тег с помощью соответствующего селектора