Home/ Questions/Q 8463907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:34:50+00:00

<!DOCTYPE html> <html><body> <p id=intro>Hello <em id=abcd>intro</em> World!</p> <script type=text/javascript> var txt=document.getElementById(intro).innerHTML; var el

  • 0
<!DOCTYPE html>
<html><body>

<p id="intro">Hello <em id="abcd">intro</em> World!</p>

<script type="text/javascript">
var txt=document.getElementById("intro").innerHTML;
var el = document.createElement("span");
el.innerHTML = txt;
var aa = el.getElementById("abcd").innerHTML;
alert( aa );
</script>
</body></html>

The above is a simple snippet. Actually I have an HTML editor and when the user saves the data I should save only the required content. Here I am getting the content of an element and manipulating it with DOM and pass the details to the server. This way I will not change the page content (user view remains the same) and he/she will continue editing the document.

The above is a simple example but in the real case I have to remove, change and move certain elements. The above code fails el.getElementById("abcd").innerHTML. Appreciate any pointers.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can create a hidden iframe to manipulate all your changes, thus creating a separate DOM, then simply pull back the results you want.

    var iframe;
if (document.createElement && (iframe = document.createElement('iframe'))) {
    iframe.name = iframe.id = "externalDocument";
    iframe.className = "hidden";
    document.body.appendChild(iframe);

    var externalDocument;
    if (iframe.contentDocument) {
        externalDocument = iframe.contentDocument;
    } else if (iframe.contentWindow) {
        externalDocument = iframe.contentWindow.document;
    }
    else if (window.frames[iframe.name]) {
        externalDocument = window.frames[iframe.name].document;
    }

    if (externalDocument) {
        externalDocument.open();
        externalDocument.write('<html><body><\/body><\/html>');
        externalDocument.close();

        /* Run your manipulations here */
        var txt = document.getElementById("intro").innerHTML;
        var el = document.createElement("span");
        el.innerHTML = txt;

        /* Attach your objects to the externalDocument */
        externalDocument.body.appendChild(el);

        /* Reference the externalDocument to manipulate */
        var aa = externalDocument.getElementById("abcd").innerHTML;
        alert(aa);
    }

    /* Completed manipulation - Remove iFrame */
    document.removeChild(iframe);
}

    I have it working here:
    http://jsfiddle.net/ucpvP/

    • 0