Search code examples
javascripthtmlgetelementsbytagname

Getting DOM body from text using javascript

I'm having issues with extracting the body from javascript code using getElementsByTagName.

var enc1 = '<HEAD></HEAD><BODY>test</BODY>';
var wrapper = document.createElement('div');
wrapper.innerHTML = enc1;
var converted = wrapper.getElementsByTagName("body");
var res = "Body of text: " + converted;

document.getElementById("demo").innerHTML = res;
<div id="demo"></div>

jsfiddle

when I use converted, I get [object HTMLCollection]. When I use converted[0], I get undefined.

Is there something I'm missing?

Solution

  • <head> and <body> are a little bit more special than your everyday <div>s. You can only place them as direct descendants of <html>.

    Creating a html tag like that is currently not possible with createElement, you will need to create a new document and then use it to access its .body property - .body.innerHTML to get the HTML.

    The only ways to parse entire HTML documents are currently document.implementation.createHTMLDocument and DOMParser. DOMParser is a bit more fresh, so I would recommend using it.

    const enc1 = '<HEAD></HEAD><BODY>test</BODY>';
const newDocument = (new DOMParser).parseFromString(enc1, 'text/html');
const converted = newDocument.body.innerHTML;
const res = "Body of text: " + converted;

document.getElementById("demo").innerHTML = res;
    <div id="demo"></div>