ansaurus

Question

Javascript function that returns a DOM when input is html content

Answer 1

+3 A:

With "broken" HTML (which I am assuming is invalid) the way it is interpreted is largely up to the browser and the mode that the browser is in. The DOCTYPE at the top will dictate how the innerHTML property is parsed when it is set. For XHTML, it will give you some odd results because "broken" HTML will mess up your entire page. The function you are using is correct, but it seems you need to check your input for compliance before attempting to create the div.

Scott M. 2010-07-29 12:53:45

Hey I agree with you, the input is given by user here so I cannot restrict the user to insert only correct HTML. I need a function that works fine even when the HTML is not proper.

Dora 2010-07-30 06:11:38

@Dora - There isn't one really, you're feeding a program invalid input, the output will be unpredictable and *very* inconsistent cross-browser.

Nick Craver 2010-07-30 10:21:58

Answer 2

A:

You can achieve this by writing it out to a hidden iframe:

<iframe id="frame" style="display:none"></iframe>
<script type="text/javascript">

function htmltoelement(elementHTML)
{   
    var temp = document.getElementById('frame');

    // Cross-browser way to get the iframe document
    var idoc = (temp.contentWindow || temp.contentDocument);
    if (idoc && idoc.document) idoc = idoc.document;

    // Put the HTML in the iframe
    idoc.write("<html><body>" + elementHTML + "</body></html>");
    temDiv = document.createElement('div');
    temDiv.innerHTML = idoc.body.innerHTML;

    return temDiv;
}

document.body.appendChild(htmltoelement('<b><i>hi</b></i>'));

</script>

The hidden IFRAME seems to be necessary, document.createElement('iframe') didn't work in Opera.

dark_charlie 2010-07-29 13:46:36

ansaurus

tags:

views:

answers:

Javascript function that returns a DOM when input is html content

related questions