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...
For further actions, you may consider blocking this person and/or reporting abuse
It never occurred to me to create new elements with object assign. 🔥 I always created the element then added properties and attributes after.
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? 🤷
It's so useful when adding a bunch of properties to
.style
🙂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.
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
Your input is much appreciated ;)
For a one-liner... hmm:
If you're not happy using innerHTML then it could look like this:
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?
I don't think so, sorry. You can't assign to
.children
in this way.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
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 saidel.innerHTML += '<b>Just kidding!</b>'
?).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.const el = Object.assign(document.createElement('div'), {
textContent:
Your div now has text
,className: 'and-is-classy',
});
This is sooooo gooood!!!
Object.assign
works wonderfully~~~I love this and will be playing with it today!!