innerHTML property on a
DocumentFragment object is not possible because the
innerHTML property does not exist on the
DocumentFragment object. If you need to parse a string containing HTML tags and get it as a
DocumentFragment object, then you can make use of the
<template> tag in the following way instead:
const str = '<p>hello world!</p>'; const tpl = document.createElement('template'); tpl.innerHTML = str; const fragment = tpl.content; console.log(fragment); /* Output: #document-fragment <p>hello world!</p> */
The reason this works is because the
<template> element supports
innerHTML property, and has a
content property that returns a
<template> element's contents (which in this case are the parsed HTML tags from our string).
DocumentFragment.insertBefore() won't be of much use in this case as either of those don't parse string HTML tags.
Be aware that the
DocumentFragment will strip out
<body> tags if they exist in the string. If you wish to have those included then you should consider using
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.