Declarative-ish JavaScript API for creating DOM?


I noticed that ParentNode.append() returns undefined, but if it returned this, then it would be possible to write stuff like this:

              new MyElement().append(
                new MyOtherElement().append(
                  document.createElement( 'div' ).append(

which is somewhat “declarative”. Does any native API exist like that? It would also be easy to map JSX to that.

I know we can create these APIs ourselves. Just wondering about native options.


Updated the title, because obviously HTML is a declarative API. I meant to ask about declarative JS API.


Does any native API exist like that?

nope, but people have been talking about that:


document.createElement could accept the arguments to append directly (as array).


Actually, why not just use JavaScript (html) Tagged Template Literals?


Because it seems like string-parsing overhead at runtime. Or not?


HTML and JavaScript parsing is already costly enough. Just look at the original post -^ It’s much more costly than the equivalent HTML.

Also, instantiating this in one go is more efficient. And Template Literals can easily be pre-compiled and re-used. The equivalent JavaScript code has to be re-executed. (Any one of the various symbols could have changed)


Apple proposed extending the <template> element to handle interpolation, which might be similar enough to what you’re looking for?

w3c/webcomponents: HTML Template Instantiation


@Androbin @Tigt Interesting replies, thanks!

I checked out Surplus recently, it looks really nice too: converts JSX to in-place updates, similar to hyperHTML or lit-html approaches, but faster without DOM diffing.


This might be close to what you are looking for:

Inspired by kotlin-like layout parameters.

Lit-html also comes to mind, with string literals.