javascript create div and append it next to a child element without id

Question

Using the solution suggested here: https://stackoverflow.com/a/32135318/10279127 i'm trying to create a new div, and append it inside a parent div with id, next to a child <a> html element.

html:

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

js:

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);

If inside .appendAfter(...) instead of tToAfter i write document.getElementById('randomElementId') it works and appends it, so i think must be pure javascript, is there a way in js to do something like: document.getElementById('div' + index).firstChild to get the <a> ?

Or to make it entirely with jQuery using the insertAfter (https://stackoverflow.com/a/8707793/10279127) ?

There's some questions to you: will `` always be the first `div` child? will be other elements inside the `div` between the a tag and the appended tag? — Calvin Nunes, Aug 29 '18 at 18:33
I feel what you mean, in fact getting the first child wouldn't be best, cause right now it's always the first child but if that changes in the future the code breaks. — , Aug 29 '18 at 18:37

score 1 · Accepted Answer · answered Aug 29 '18 at 18:31

1

you can select inside div#div0 by using

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

answered Aug 29 '18 at 18:31

Ratnamala Nallapaneni

36
2

benvc · Answer 2 · 2021-10-01T22:22:02.770

You can simplify your approach by using insertAdjacentElement. For example (the css is irrelevant - just there so you can visually see the inserted div):

const anchor = document.querySelector('#div0 a');
const 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>

javascript create div and append it next to a child element without id

2 Answers2