1

У меня есть элемент

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>
<div></div>

Есть ли возможность переместить все дочерние элементы ul в div при этом удалить пустой элемент, чтобы получилась такая конструкция:

<div>
     <li></li>
     <li></li>
     <li></li>
</div>

Дополнения: требуется добавить children в shadowRoot. Вариант который меня устроил в данный момент использовать не div а template

<template>
         <li></li>
         <li></li>
         <li></li>
</template>

Дальше в коде делаю clone и копирую.

     let clone = document.importNode(el.content, true);
     el.parentNode.shadowRoot.appendChild(clone)
     el.remove()
2
  • У вас же в итоге разметка будет не валидной div > li
    – user256824
    Commented 15 июл. 2019 в 22:04
  • Это для примера. Мне это для серверного рендеринга надо. Я html получил, сейчас мне надо для гидрации в shadowRoot вставить элементы.
    – Sergey
    Commented 15 июл. 2019 в 22:06

1 ответ 1

1

Если брать именно Вашу разметку, то можно сделать например вот так:

let div = document.querySelector('div');
document.querySelector('ul li').forEach(li => div.append(li));
document.querySelector('ul').remove()

Однако, конечно надежнее использовать идентификаторы а не типы элементов, в качестве селекторов...

—-

Если Вас устраивает потеря слушателей на перемещаемых элементах, можно еще сделать вот так:

let div = document.querySelector('div');
let ul = document.querySelector('ul');
div.innerHTML = ul.innerHTML;
ul.remove()
5
  • Да это хороший вариант. Но неужели нет варианта без цикла ?
    – Sergey
    Commented 15 июл. 2019 в 21:58
  • @Sergey есть, если Вас устроит потеря слушателей, можно переместить весь innerHTML Commented 15 июл. 2019 в 21:59
  • el.parentNode.shadowRoot.innerhtml = el.childNodes В shadowRoot не вставилось. Я Element.insertAdjacentHTML() использовать, не получается.
    – Sergey
    Commented 15 июл. 2019 в 22:08
  • Про shadowRoot извиняюсь не написал.Варианты да, хорошие.
    – Sergey
    Commented 15 июл. 2019 в 22:28
  • написал дополнения. Однако, конечно надежнее использовать идентификаторы а не типы элементов, в качестве селекторов... так и есть конечно. Я в тот момент <template> использовал, по этому написал такой пример. С темплейтами такой проблемы нет.
    – Sergey
    Commented 18 июл. 2019 в 10:13

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.