Javascript 向div添加输入_Javascript_Html_Css

Javascript 向div添加输入

javascript html css

Javascript 向div添加输入,javascript,html,css,Javascript,Html,Css,所以我试图创建自己的待办事项列表，只是为了学习javascript，我被卡住了我已经用用户编写的输入添加了一个新的div，但是没有设计 <div class="isDo"> // HTML code <p id="newTask">Task 1</p> <hr> </div> function addTask() { // JavaScript Code var div = document.createElement(

所以我试图创建自己的待办事项列表，只是为了学习javascript，我被卡住了

我已经用用户编写的输入添加了一个新的div，但是没有设计

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

当我使用append段落而不是div它时，设计工作正常，但我想为每个输入值添加一个标记

如何添加带有段落和hr标记的整个div？

请尝试以下方法：

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

这应该可以做到： `

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