Question

我想创建动态段落，因此我编写了以下代码。用户单击按钮后，应该添加一个新的段落，该段落的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>

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

Answer 2

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

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

Answer 4

这是因为表单中的按钮会调用submit并重新加载页面。您会在短时间内看到新的p-tag。但是页面重新加载，所有p都消失了。

将type="button"添加到按钮中以将其排除为提交按钮，或者在按钮事件中使用event.preventDefault()。

Answer 5

您的代码100％正确，唯一的问题是您的<button>add</button>正在执行回发，从而刷新了您的页面。

您只需要在按钮标签中添加一种按钮，它就会像这样工作：

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

希望这会有所帮助

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

您的表单正在发送，因此请致电e.preventDefault()
您的删除操作无效，因为p不是body的直接子代，因此请通过在您插入的元素中添加id并使用适当的选择器删除标签来对其进行修复

为什么我不能动态创建html元素？

6 个答案: