jQuery вставить дочерний элемент вторым не в dom

Question

Код прекрасно работает. Но как можно сделать тоже самое, только вне dom? Например:

<div id="id">
    <div>дочерний элемент1</div>
    <div>дочерний элемент2</div>
</div>

Рабочий вариант

  $("#id").children().eq(1).before('<div>Новый элемент</div>');

Не работает

let html = '<div id="id"><div id="id1">дочерний элемент1</div><div id="id2">дочерний элемент2</div></div>';

$(html).children().eq(1).before('<div id="id2">Как вставить этот элемент в html строку?</div>');
console.log(html);

Как сделать чтобы работал?

Answer 1

Я не гуру и буду объяснять на пальцах

Я приведу примеры на javascript - так как проще это и ни требует подключение jQuery

Есть несколько методов:

1) beforebegin - вставит перед элементом

2) afterend - вставит после элемента

3) afterbegin - вставит во внутрь в самое начало

4) beforeend - вставит во внутрь в самый конец

Дальше получим нужного родителя:

let parent = document.querySelector(".items");

потом получим всех его потомков и запишем их в переменную по отдельности

let el1 = parent.children[0];
let el2 = parent.children[1];
let el3 = parent.children[2];

Потом будет творить первые наши чудеса

el3.insertAdjacentHTML('afterEnd', newChild);

Где el3 это третий потомок items но счёт начинается с 0 всегда по этому в квадратных скобках счёт с 0 и потом на MDN я вычитал о такой конструкции ну и в итоге я вставил по инструкции и получил вот это (показать код)

let parent = document.querySelector(".items");
let newChild = `<div class="item4">Я новый элемент</div>`;

let el1 = parent.children[0];
let el2 = parent.children[1];
let el3 = parent.children[2];

el3.insertAdjacentHTML('afterEnd', newChild);

.items {
  font-size: 30px;
  font-weight: 700;
  font-family: sans-serif;
}

.item4 {
  color: red;
}

<div class="items">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
</div>

Answer 2

let html = '<div id="id">...</div>';

$(html).children().eq(1).before('<div>...</div>');
console.log(html);

У вас тут в переменной html хранится строка. Потом вы заворачиваете строку в jQuery-объект и вставляете туда новый элемент. Всё безошибочно срабатывает, но от этого строка-то не меняется) И новый html тоже нигде не сохраняется. А console.log(html); выводит ранее созданную неизменную строку, как и должен.

Нужно изначально в переменной хранить jQuery-объект, чтобы изменить и дальше использовать именно его.

let $elem = $('<div id="id"><div>дочерний элемент1</div><div>дочерний элемент2</div></div>');

$elem.children().eq(1).before('<div>Тест-тест Новый элемент</div>');;

$('body').html( $elem );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

jQuery вставить дочерний элемент вторым не в dom

Ответы (2 шт):