Support for appending a cloned template adjacent to an existing element

[bahrus]

What problem are you trying to solve?

I frequently encounter scenarios where I need to take a template, and rather than append it to a child of a node, I instead need to insert the contents adjacent to an existing element. Examples include adding rows to a table, or list items.

The demand to be able to do this, I think, is demonstrated by JSX's support for the fragments ("<>") as well.

The following naive approach gives a runtime error:

    <table>
        <tbody>
            <tr id=target>
                <td>hello</td>
            </tr>
            <tr>
                <td>goodbye</td>
            </tr>
        </tbody>
    </table>

    <template id=source>
        <tr>
            <td>adjacent row 1</td>
        </tr>
        <tr>
            <td>adjacent row 2</td>
        </tr>
    </template>

    <script>
        const clone = source.content.cloneNode(true);
        target.insertAdjacentElement('afterEnd', clone);
    </script>

What solutions exist today?

This can be done programmatically with a significant amount of effort, using some combination of insertAdjacentElement, insertAdjacentText, etc.. Creating a function in userland is certainly doable. I confess I have searched for someone to have published such a function, that I could point to, with a high record of downloads, and I've come up short finding even one example of such a function, so perhaps the demand isn't that great, which mystifies me, so maybe I'm missing something.

What does work is target.insertAdjacentHTML(source.innerHTML), but then:

1. Grabbing references to the children that were inserted becomes difficult (which cloning the template would give us) (insertAdjacentHTML doesn't return the inserted children).
2. It seems intuitive to me that the platform could do this all more efficiently if it could clone the HTML so that no need to reparse the HTML is necessary, and it could "slide the clone in" somehow. Has that been ruled out, from a performance point of view?

How would you solve it?

Something like

target.insertAdjacentClone('afterEnd', clone);

Anything else?

If insertAdjacentHTML could return the children inserted, that might be helpful.

[bahrus]

Thanks to the adjacent issue raised here I've become aware that after and before may do the trick, so no need for this api, it appears.

I wonder if mdn should be updated to indicate that insertAdjacent* methods are just there for backwards compatibility (or not?), or at least link to them as alternatives?