DEV Community

How to replace arbitrary portions of HTML?

Ben Halpern on February 20, 2020

If I had a portion of html such as.... <html> <head> some code... </head> <body> <header> Some...
Read full post
Collapse
 
irreverentmike profile image
Mike Bifulco •

I've read this a few times, and I'm not entirely sure what you're asking for, Ben. Can you clarify a bit? It looks like there's some malformed HTML in the first snippet, and incomplete HTML in the second.

Collapse
 
ben profile image
Ben Halpern •

Basically I want to replace the first half of the document, without concern for HTML elements or depth etc. Basically split the string in half and replace the first half with new HTML.

Collapse
 
pavelloz profile image
Paweł Kowalski •

For some reason seems like a bad idea :)

Collapse
 
kenbellows profile image
Ken Bellows •

So off the top, I don't think you can replace the <html> tag itself; when I try using stuff like htmlElement.outerHTML = '...', I get errors like:

Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': This element's parent is of type '#document', which is not an element node.

But assuming your question could be rephrased to be about replacing the first half of the HTML inside the <html> tag, then sure, you can use htmlElement = document.getRootNode().firstElementChild to get the <html> tag, then set htmlElement.innerHTML to whatever you want and the browser will do its best to parse it. But there are more questions.

To write the code, I think you'd need to expand a bit more on what you want. Presumably this is meant to be a reusable bit of code, so what are the boundaries on what you'd be replacing? Like, on the probably-too-narrow end, sure, you could replace that exact string of HTML using something like htmlElement.innerHTML = html.innerHTML.replace('<head>...', '...new html here...'). But I'm assuming you want something more flexible, in which case you'd need to say more about how you find the start and end points of the segment to replace.

Collapse
 
ben profile image
Ben Halpern •

Thanks this definitely the type of approach I had in mind but couldn't quite wrap my head around it in this way.

Collapse
 
yashints profile image
Yaser Adel Mehraban • • Edited

I'd suggest get the parent node using JS and then replace an entire node with another node that you've built.

parent.replaceChild(newNode, oldChild);

Manipulating DOM by replacing HTML could be dangerous if any JS is depending on any part of that.

Collapse
 
sidvishnoi profile image
Sid Vishnoi •

Or use oldChild.replaceWith(newChild)

Collapse
 
deepu105 profile image
Deepu K Sasidharan •

You can replace parts of HTML either as string or by Dom manipulation and insert them back. But if you replace a node its children will be affected but not its siblings and parent. For example you can fetch the head part and manipulate it and insert it back. Same for header in your sample. I would recommend manipulating DoM rather than working with strings