Skip to main content

Custom insertAfter() Challenge

Instructions

You may think that since there is an insertBefore() method, there is also an insertAfter(), but there isn't. In this challenge, I want you to create a custom insertAfter() function. If you don't want to do it as a challenge, that's fine, just follow along.

  • The first param will be newEl which will be a new element that you create with document.createElement()
  • The second param will be existingEl which is an element in the DOM that you want to insert your new element after

The function will be called like this:

// New element to insert
const li = document.createElement('li');
li.textContent = 'Insert Me After!';

// Existing element to insert after
const firstItem = document.querySelector('li:first-child');

// Our custom function
insertAfter(li, firstItem);

Hint:

Remember the properties to get parent and sibling elements. Use some of those combined with insertBefore().

Click For Solution
function insertAfter(newEl, existingEl) {
  existingEl.parentElement.insertBefore(newEl, existingEl.nextSibling);
}

The solution is actually really simple.

  • We take the existingEl and get the parent with either the parentElement or parentNode property.
  • We call insertBefore() on the parent and then pass in newEl and the element AFTER existingEl. We can get that with the nextSibling property

Putting our new element before the existing element's next sibling is the same as putting it after the existing element