Блог

Главная - Вопросы по программированию - Javascript cloneNode для добавления новых элементов

Javascript cloneNode для добавления новых элементов

#javascript

#javascript

Вопрос:

то, что я пытаюсь сделать, это. когда я нажимаю

 function runIt(text) { 
  var counter = 1;
  var comment = document.getElementById("name");
  comment.innerText = text;
  comment.cloneNode(true);
  comment.id  = counter;
}
document.addEventListener("click", function(e){
    runIt("test")
}, true);

Я хочу, чтобы он добавил новый элемент под этим выводом «test».
он продолжает заменяться. 🙁

HTML

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>t</title>
</head>
<body>
<p id="name" class="someclass"></p>
</body>
</html>

Комментарии:

1. comment.cloneNode(true) возвращает новый узел. Вы не используете его результат. Вы только изменяете исходный элемент. Больше ничего не заменяется. Ознакомьтесь с DOM API.

Ответ №1:

cloneNode возвращает новый код, который затем можно добавить в DOM. Также счетчик должен быть определен вне функции, а затем увеличиваться каждый раз.

 var counter = 1;
function runIt(text) { 
  var comment = document.getElementById("name");
  newcomment = comment.cloneNode(true);
  newcomment.innerText = text;
  newcomment.id  = counter;
  counter  ;
  document.querySelector('body').append(newcomment)
}
document.addEventListener("click", function(e){
    runIt("test")
}, true);
  
 <p id="name" class="someclass">-</p>

Метки: