CODEWITHSUNDEEP
javascripthtml
Wang_TWJ
Wang_TWJ

Reputation: 63

Why can't I create html element dynamically?

I want to create paragraph dynamic,so I wrote the following code. After user click the button, a new paragraph whose innerText is the user's inputs should be added.But I failed, Is there someone can help me?

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>

Upvotes: 2

Views: 64

Answers (6)

Cray
Cray

Reputation: 2850

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. Your form is being sent, so prevent it by calling e.preventDefault()

  2. Your remove is not working, because p is not a direct child of body, so fix it by adding id to your inserted element and removing tag with proper selector

Upvotes: 0

Daut
Daut

Reputation: 2625

You can just add .preventDefault() to prevent the button from refreshing the page.

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>

Upvotes: 1

Zeeshan Adil
Zeeshan Adil

Reputation: 2125

Your code is 100% correct the only problem happening is your <button>add</button> is doing a postback which is refreshing your page.

You just need to add a type of button to your button tag and it will work like this:

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

Hope this helps

Upvotes: 0

Domske
Domske

Reputation: 5656

It's because the button in form invokes a submit and reloads the page. You see the new p-tag for short time. But the page reloads and all p a gone.

Add type="button" to your button to exclude it as submit button or use event.preventDefault() in your button event.

Upvotes: 0

aMJay
aMJay

Reputation: 2233

Add type="button" to your button html tag:

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

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Your code is working but the form is being submitted that is why the dynamically added value get lost and page is refreshed. To make it work as you expect, you need to use e.preventDefault(); to prevent the form from being submitted:

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>

Upvotes: 3

Related Questions