javascript создать div и добавить его рядом с дочерним элементом без идентификатора

Question

Используя предложенное здесь решение: https://stackoverflow.com/a/32135318/10279127 Я пытаюсь создать новый div и добавить его в родительский div с идентификатором рядом с дочерним <a> html-элементом.

HTML:

<div id="div0">
<a href="#" class="link">anchor text</a>
// I'd like to place the new div here
</div>

ЯШ:

Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;

var NewElement = document.createElement('div');
NewElement.id = 'newDivID';
var tToAfter = $('#div' + index + ' > a'); // this is what i tried but doesn't work
NewElement.appendAfter(tToAfter);

Если внутри .appendAfter(...) вместо tToAfter я пишу document.getElementById('randomElementId'), это работает и добавляет его, поэтому я думаю, что это должен быть чистый javascript, есть ли способ в js сделать что-то вроде: document.getElementById ('div' + index) .firstChild, чтобы получить <a>?

Или сделать это полностью с помощью jQuery, используя insertAfter (https://stackoverflow.com/a/8707793/10279127)?

Answer 1

Вы можете упростить свой подход, используя insertAdjacentElement. Например (CSS не имеет значения - только там, чтобы вы могли визуально увидеть вставленный div):

let anchor = document.querySelector('#div0 a');
let elem = document.createElement('div');
elem.id = 'newDivID';
anchor.insertAdjacentElement('afterend', elem);

div:not(#div0) {
  height: 20px;
  background-color: green;
}

<div id="div0">
  <a href="#" class="link">anchor text</a>
  // I'd like to place the new div here
</div>

Answer 2

вы можете выбрать внутри div # div0 с помощью

const anchor = document.querySelector("#div0>a");