Support for insertAdjacentHTML

[danawoodman]

Is there plans to support element.insertAdjacent in jsdom?

document.body.insertAdjacentHTML('afterbegin', '<p>Hello World</p>')

Results in:

TypeError: document.body.insertAdjacentHTML is not a function

[Joris-van-der-Wel]

Yes, I was planning to add this eventually

[mbrevda]

+1. Fresh jquery convert here: is there another way that I can use in the meantime?

[domenic]

You can just use document.body.innerHTML = '<p>Hello World</p>' + document.body.innerHTML. It will be slower as it has to re-parse everything, but it will work. You can also use DOM APIs directly.

[mbrevda]

Oh, cool. Thanks! Seems insertAdjacentHTML is much more efficient, but I guess this will do in the mean time

[Joris-van-der-Wel]

Here is how you can avoid a reparse. This would be similar to how insertAdjacentHTML could be implemented:

function htmlToFragment(ownerDocument, markup) {
    const container = ownerDocument.createElement('div');
    container.innerHTML = markup;
    const fragment = ownerDocument.createDocumentFragment();
    while (container.firstChild) {
        fragment.appendChild(container.firstChild);
    }
    return fragment;
}

(might contain typo's)

Then you can do something like: node.appendChild(htmlToFragment(document, '<p>hello world</p>'))

[domenic]

Yeah, that will generally work, although it doesn't work for e.g. inserting <tr>s into tables.

[patrickfatrick]

+1. Trying out jsdom for the first time today and came across this limitation.

[tombh]

You can write your own with something like window.HTMLElement.prototype.insertAdjacentHTML = function(){}

[inikulin]

@domenic It will work even for <tr> if you'll use <template> as container.