DEV Community

Discussion on: Beyond appendChild: Better convenience methods for HTML

Collapse
 
maxart2501 profile image
Massimo Artizzu

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>'?).

Collapse
 
samthor profile image
Sam Thorogood

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.