Блог

Главная - Вопросы по программированию - insertAdjacentHTML не работает с documentfragment

insertAdjacentHTML не работает с documentfragment

#javascript #html #css

#javascript #HTML #css

Вопрос:

у меня есть родительский элемент и некоторые элементы внутри, затем я создаю фрагмент и клонирую некоторые узлы, помещаю их внутрь фрагмента, затем пытаюсь вставить фрагмент внутри dom с помощью insertAdjacentHTML код выглядит следующим образом

 <div id="slide-container">
    <div class="page1">page0</div>
    <div class="page1">page1</div>
    <div class="page1">page2</div>
    <div class="page1">page3</div>
    <div class="page1">page4</div>
  </div>
<script>
var e = document.querySelector('#slide-container'), f = new DocumentFragment();
//add some elements to the fragment then try to insert them depending on some conditions
e.insertAdjacentHTML('afterbegin',f)
</script>

Ответ №1:

Фрагмент документа — это, по сути, абстрактный контейнер для узлов. Это не HTML.

insertAdjacentElement Метод также не работает. Вы можете использовать .insertBefore вместо этого.

 var e = document.querySelector('#slide-container'),
  f = new DocumentFragment();

f.appendChild(document.createElement("div")).textContent = "works!";

e.insertBefore(f, e.firstChild)  
 <div id="slide-container">
  <div class="page1">page0</div>
  <div class="page1">page1</div>
  <div class="page1">page2</div>
  <div class="page1">page3</div>
  <div class="page1">page4</div>
</div>

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

1. есть ли способ преобразовать внутренний фрагмент в html или в строку, я знаю, что у него нет метода innerHTML, но есть ли способ это сделать ?!

2. Я думаю, вам нужно будет объединить .outerHTML каждый из его дочерних узлов. Но если вам нужна строка HTML, почему вы используете фрагмент документа для начала?

3. поскольку мне нужно выбрать некоторые из этих divs, клонируйте их, добавьте их в document fragment, и я должен снова подключить их к dom.

4. Вместо добавления к фрагменту, можете ли вы добавить к slide-container нему напрямую? Если у вас нет огромного числа, я сомневаюсь, что будет большая разница в производительности.

5. иногда это примерно от 10 до 20 div, может быть, больше, поэтому я забочусь о производительности