Adding input to div

Question

So I'm trying to create my own To Do list just to learn javascript and I'm stuck.

I've managed to add a new div with the input that the user writes, but there's no design.

<div class="isDo"> // HTML code
  <p id="newTask">Task 1</p>
  <hr>
</div>

function addTask() { // JavaScript Code
  var div = document.createElement("div");
  var taskAdd = document.getElementById("taskAdd").value;

  div.innerHTML = taskAdd;

  document.getElementsByClassName("isDo")[0].appendChild(div);
}

When I used append paragraph instead of div it the design works, but I want to ad an <hr> tag for each input value.

What way can I add an entire div with paragraph and hr tag?

François PIQUARD · Accepted Answer · 2020-04-14 11:06:49Z

This should do the trick :) `

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
      <div class="isDo"> 
        <p id="newTask">Task 1</p> 
        <hr>
      </div>
      <button id="btn" >add a tag</button>

      <script>
        function addTask() { // JavaScript Code
          var div = document.createElement("div");
          var taskAdd = document.getElementById("newTask").innerHTML; 
          //change the id of the el because taskAdd doesn't point to an element
          div.innerHTML = `<p>${taskAdd}</p><hr>`; 
          //this is the part where you add the text in taskAdd and the hr tag
          document.getElementsByClassName("isDo")[0].appendChild(div);
        } 
        var btn = document.getElementById("btn")
                          .addEventListener("click", addTask);
      </script>
    </body>
  </html>

`

Abhishek Kulkarni · Accepted Answer · 2020-04-14 10:56:14Z

0

Try this below :

<!DOCTYPE html>
<html>
<title>Test Code</title>
<head>
<script>
function addTask() {
  var div = document.createElement("div");
  var taskAdd = document.getElementById("taskAdd").value;
  div.innerHTML = taskAdd + "<hr>";
  document.getElementsByClassName("isDo")[0].appendChild(div);

}
</script>
</head>
<body>
    <input id="taskAdd">
    <button onclick="addTask()">Add</button>
    <div class="isDo">
        <p id="newTask">Task 1</p>
        <hr>
    </div>
</body>
</html>

answered Apr 14, 2020 at 10:56

Abhishek Kulkarni

1,7671 gold badge8 silver badges9 bronze badges

Collectives™ on Stack Overflow

Adding input to div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related