July 04, 2021
This is more of an appreciation post for how useful the
of helpers is as opposed to doing a full coverage on them.
To be specific, these are the methods, in the order of usage occurences in my day to day tasks:
All of these accept a special
position descriptor as their 1st argument and a
string or a node of
Element type as the content that needs to be inserted in
the desired place.
Possible values for
position here are pretty self explanatory but for some
reason I have to look them up anyway when I have to use the method:
<!-- beforebegin --> <div> <!-- afterbegin --> <!-- beforeend --> </div> <!-- afterend -->
Maybe it’s time to think of a good mnemonic for them?
Anyways, I just appreciate how concise and obvious the code that uses these helpers is, it just gets the job done in such an easy manner.
document .querySelector('#header') .insertAdjacentHTML('beforebegin', '<div>Some very important ad.</div>')
Raw and imperative DOM manipulation isn’t everyone’s piece of cake for sure, but finding such gems in the browser APIs makes the whole process less of a hassle for me personally.