<!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>

Powyższy jest prostym fragmentem. Właściwie mam edytor HTML i gdy użytkownik zapisuje dane, powinienem zapisać tylko wymaganą zawartość. Tutaj otrzymuję zawartość elementu i manipulowanie go domem i przekazuje szczegóły na serwerze. W ten sposób nie zmienię zawartości strony (widok użytkownika pozostaje taki sam), a on / ona będzie kontynuować edycję dokumentu.

Powyższy jest prosty przykład, ale w prawdziwym przypadku muszę usunąć, zmienić i przenieść niektóre elementy. Powyższy kod nie powiedzie się el.getElementById("abcd").innerHTML. Doceń wszelkie wskazówki.

1
Dominic 31 sierpień 2012, 12:52

3 odpowiedzi

Najlepsza odpowiedź

Możesz utworzyć ukrytą iframe, aby manipulować wszystkimi zmianami, tworząc oddzielną dom, a następnie po prostu odciągnij żądane wyniki.

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);
}

Pracuję tutaj: http://jsfiddle.net/UCPVP/

0
Scott 31 sierpień 2012, 09:43

Spróbuj użyć jQuery jak podane poniżej.

  function SaveData() //Your add function
    {
       var txt=$("#intro").html();
       $(document).append("<span id='abcd'>" + txt+ "</span>");
       var aa = $("#abcd").hmtl();
       alert(aa);
     }
0
G . R 31 sierpień 2012, 09:01

Możesz użyć elementu Domu, który nigdy nie jest dołączony do DOM. Używam tej funkcji "Cleanup":

  function cleanup(str){
    var tester = document.createElement('div'),
        invalid, result;
    tester.innerHTML = str;

    //elements I don't allow
    invalid = tester.querySelectorAll('script,object,iframe,style,hr,canvas');

    // the cleanup (remove unwanted elements)
    for (var i=0;i<invalid.length;(i+=1)){
      invalid[i].parentNode.removeChild(invalid[i]);
    }

    result = tester.innerHTML;
    tester = invalid = null;

    //diacritics to html-encoded
    return result.replace(/[\u0080-\u024F]/g,
                          function(a) {return '&#'+a.charCodeAt(0)+';';}
                         )
                 .replace(/%/g,'%25');
  }
  //usage:
  cleanup(document.getElementById("intro").innerHTML);

Możesz rozszerzyć funkcję z własnym kodem, aby usunąć, zmienić i przenieść niektóre elementy.

0
KooiInc 31 sierpień 2012, 09:12