javascript - In DocumentFragment: Failed to execute 'insertAdjacentHTML' on 'Element': The eleme

admin管理员组

文章数量:1429524

I am working inside of a DocumentFragment, and am attempting to insert HTML into it. We know that that a DocumentFragment does not have an innerHTML setter, so I attempted to insert a temporary node into the DocumentFragment and insert HTML after it using insertAdjacentHTML. I would then remove the temporary element, and be left with a fragment with the DOM I wanted.

Example: (error is on purpose)

var fragment = document.createDocumentFragment();
var temporaryElement = fragment.appendChild(document.createElement('div'));

// Before we move on.. I can see that the `temporaryElement` does have a parent
console.log(temporaryElement.parentNode.nodeType);

// The following throws an error...
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>');

fragment.removeChild(temporaryElement);

I am working inside of a DocumentFragment, and am attempting to insert HTML into it. We know that that a DocumentFragment does not have an innerHTML setter, so I attempted to insert a temporary node into the DocumentFragment and insert HTML after it using insertAdjacentHTML. I would then remove the temporary element, and be left with a fragment with the DOM I wanted.

Example: (error is on purpose)

var fragment = document.createDocumentFragment();
var temporaryElement = fragment.appendChild(document.createElement('div'));

// Before we move on.. I can see that the `temporaryElement` does have a parent
console.log(temporaryElement.parentNode.nodeType);

// The following throws an error...
temporaryElement.insertAdjacentHTML('afterend', '<div>Some crazy custom HTML..</div>');

fragment.removeChild(temporaryElement);

I can clearly see that there is a parentNode for the temporary element, so why would I get this error?

• javascript
• html
• documentfragment
• html5-template

Share Improve this question Follow edited Dec 4, 2017 at 19:07 Supersharp 31.3k1111 gold badges102102 silver badges147147 bronze badges asked Feb 27, 2017 at 18:05 KevBotKevBot 18.9k55 gold badges5454 silver badges7070 bronze badges 2

• The parent node is of type Node.DOCUMENT_FRAGMENT_NODE (the console shows 11, which matches that constant), which is apparently not a valid parent for running insertAdjacentHTML. See also MDN's Browser Compatibility table, where it shows that ParentNode methods are unavailable in all browsers... – Heretic Monkey Commented Feb 27, 2017 at 19:34
• you can append another fragment, that way you don't have to remove anything later. see stackoverflow./questions/9284117/… for a handy helper – dandavis Commented Feb 27, 2017 at 19:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can:

1. Create a <template> element,
2. Add string content via its innerHTML property,
3. Get a DocumentFragment from its content property.

//Use a template
var template = document.createElement( 'template' )
template.innerHTML = '<td>Hello<td>World'

//Get the document fragment
var fragment = template.content
Row.appendChild( fragment )

<table>
  <tr id=Row></tr>
</table>

So I'm pretty sure you want to end up with a parsed div, right? So to do that you would do this.

var fragment = document.createElement("div");
fragment.innerHTML = "Some crazy custom HTML..";

//This will output exactly what your code should do
console.log(fragment);

本文标签：