Jquery .each () отображает [объект HTMLUListElement] вместо HTML

Question

Я пытаюсь динамически создавать элементы "ul" после элементов "h1" (или любого другого элемента на самом деле). При этом я решил использовать $('h1').each() для перебора всех элементов <h1>, а затем использовать el.after("some html") для добавления в DOM. Однако вместо вывода HTML <ul> он отображает [object HTMLUListElement]. В качестве теста я решил попробовать $('h2').after("some html") без какой-либо итерации. Для этого теста он правильно отображает элемент <ul> в каждом заголовке <h2>. Я ищу помощь, чтобы получить метод $.each() для правильного отображения элемента <ul>.

Это гораздо более размытая версия того, чего я пытаюсь достичь. Основная цель использования $.each() вместо неиспользования заключается в том, что мне нужно динамически создавать элементы UL и дочерние элементы LI из других переменных. Я исключил излишнюю сложность для целей этого вопроса, поскольку смог воспроизвести проблему без лишних шумов.

test = "<ul><li>UL list item 1</li><li>UL list item 2</li></ul>";
test_html = $.parseHTML(test);
$('h1').each(function(i,el){
  el.after(test_html);
});

$('h2').after(test_html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Test 1</h1>
  <h1>Test 1 Again</h1>

  <h2>Test 2</h2>
  <h2>Test2 Again</h2>
</div>

Answer 1

Вы хотите что-то подобное?

JSfiddle: https://jsfiddle.net/grusjoyb/

Я убрал параметры в вашей функции и вместо этого добавил $(this). И просто использовал строку html вместо .parseHtml объекта.

Так что я закончил тем, что изменил вашу функцию .each с

$('h1').each(function(i,el){ el.after(test_html); });

на

$('h1').each(function(){ $(this).after(test); });

Надеюсь, это поможет.