DEV Community

Beyond appendChild: Better convenience methods for HTML

Sam Thorogood on June 09, 2019

I've built on the web for a while now. So long that when I'm writing vanilla HTML/JS, my go-to has always been .appendChild() to add new HTML eleme...

Read full post

Nick Taylor • Jun 9 '19

It never occurred to me to create new elements with object assign. 🔥 I always created the element then added properties and attributes after.

Sam Thorogood Google Web Dev • Jun 9 '19

I nearly didn't include this one—it was added last. But I've seen a few people remark on how neat it is in some of my codebases, so I'm glad to share? 🤷

Massimo Artizzu • Jun 9 '19

It's so useful when adding a bunch of properties to .style 🙂

Object.assign(el.style, {
 left: x + 'px',
 top: y + 'px'
});

Nick Taylor • Jul 11 '19 • Edited

I made a little helper function based on your example @samthor which also handles inline styles. Thought I'd share here in case anyone else finds it useful. So the only thing else I added was handling inline style and wrapped it all into a function.

Jonathan Burnhill • Aug 22 '19

I keep coming back to this because I love it and am using the object assign right now, I have a little question.

Is there a way in object assign to insert children such as for instance if I want to put a x next to a image to say delete?

Sam Thorogood Google Web Dev • Aug 23 '19

I don't think so, sorry. You can't assign to .children in this way.

Jonathan Burnhill • Aug 23 '19

Thanks for your reply, I was playing with it a little bit probably when I should have been concentrating on work 😂.
You can use innerHTML though!! And I called the on click with a function so learned 2 new things yesterday about it

Yan Susanto • May 30 '20

Hi Sam,

For some reasons I stumbled upon your article while googling and if I may ask, how would you write vanilla JS for this

    $(".accordion-title").prepend(
        '<span class="toggle"><span></span><span></span></span>'
    );

Your input is much appreciated ;)

Sam Thorogood Google Web Dev • Jun 3 '20 • Edited

For a one-liner... hmm:

document.querySelector('.accordion-title').prepend(
  Object.assign(document.createElement('span'), {className: 'toggle', innerHTML: '<span></span><span></span>'}),
);

If you're not happy using innerHTML then it could look like this:

const toggleEl = Object.assign(document.createElement('span'), {class: 'toggle'});
toggleEl.append(document.createElement('span'), document.createElement('span'));
document.querySelector('.accordion-title').prepend(toggleEl);

Massimo Artizzu • Jun 9 '19

As a curiosity: .remove on <select> elements can take an optional argument. Why?

Because it's the method used to remove an option from its list. So, in this specific case, .remove does two different things: when called with no parameters, removes the element itself; when a index is passed, it removes the corresponding option in the list.

I'd suggest the awkwardly-specified, but still quite useful methods .insertAdjacentElement/.insertAdjacentHTML/.insertAdjacentText, that originated with Internet Explorer 4 (!), and take two arguments. The first of which is a string among 'beforebegin', 'beforeend', 'afterbegin' and 'afterend'. Weird.

But anyway, while the other two can be nicely polyfilled with other methods, .insertAdjacentHTML is quite unique, and can be seen as the only correct way to append a piece of HTML to an element without too much fuss or making a mess (someone said el.innerHTML += '<b>Just kidding!</b>'?).

Sam Thorogood Google Web Dev • Jun 9 '19

I've not really used the .insertAdjacent... methods. Good point about adding HTML though—I suppose the other way to do that is to create a dummy node (or fragment) and then append the content of that, but that is nice... if you're adding HTML directly.