[whatwg/dom] Support for appending a cloned template adjacent to an existing element (Issue #1250)

### 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:

```html
    <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

```JavaScript
target.insertAdjacentClone('afterEnd', clone);
```

### Anything else?

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

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1250
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/dom/issues/1250@github.com>