Добавление ввода в div - PullRequest
Новая
       0

Добавление ввода в div

0 голосов
/ 14 апреля 2020

Итак, я пытаюсь создать свой собственный список дел, чтобы узнать 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);
}

Когда я использовал добавление абзаца вместо div, дизайн работает, но я хочу добавить тег <hr> для каждого входного значения.

Каким образом я могу добавить весь div с абзацем и тегом hr?

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Это должно сработать :) `

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

`

0 голосов
/ 14 апреля 2020

Попробуйте это ниже: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...