Сочетание querySelectorAll и appendChild не работает - PullRequest
Новая
       30

Сочетание querySelectorAll и appendChild не работает

0 голосов
/ 07 ноября 2019

У меня есть несколько списков определений с большим количеством элементов dt. Я хотел бы добавить button внутри каждого dt, но я понятия не имею, почему мой код не работает.

Вот что я попробовал: 

const button = Object.assign(document.createElement("button"), {
  type: "button"
})

const descriptionTerms = document.querySelectorAll("dt")
// Or should I use:
// const descriptionTerms = [...document.getElementsByTagName("dt")]?

descriptionTerms.forEach(descriptionTerm => {
  descriptionTerm.appendChild(button)
})

Что такоеЯ делаю не так? Какой самый элегантный способ сделать это, используя ECMAScript 6?

1 Ответ

2 голосов
/ 07 ноября 2019

Ваш код не работает, потому что вы пытаетесь добавить один и тот же объект кнопки к нескольким родителям, что неправильно. Чтобы решить эту проблему, создайте кнопку для каждого dt: 

descriptionTerms.forEach(descriptionTerm => {
  const button = Object.assign(document.createElement("button"), {
    type: "button"
  })
  descriptionTerm.appendChild(button)
})

См. документы для получения дополнительной информации:

Node.appendChild ()Метод добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе , appendChild () перемещает его из своей текущей позиции в новую позицию (нет необходимости удалять узел из его родительского узла перед добавлением егов другой узел).

Другой способ - клонировать существующую кнопку:

Это означает, что узел не может находиться в двух точках документа одновременно. Таким образом, если узел уже имеет родителя, узел сначала удаляется, а затем добавляется в новой позиции. Метод Node.cloneNode () можно использовать для создания копии узла перед добавлением его под новым родителем. Обратите внимание, что копии, сделанные с помощью cloneNode, не будут автоматически синхронизироваться.

...