Question

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

以上是一个简单的片段。实际上我有一个HTML编辑器，当用户保存数据时，我应该只保存所需的内容。在这里，我获取元素的内容并使用DOM操作它并将详细信息传递给服务器。这样我就不会更改页面内容（用户视图保持不变），他/她将继续编辑文档。

以上是一个简单的例子，但在实际情况下，我必须删除，更改和移动某些元素。上述代码未通过el.getElementById("abcd").innerHTML。感谢任何指针。

Answer 1

您可以创建一个隐藏的iframe来处理所有更改，从而创建一个单独的DOM，然后简单地撤回您想要的结果。

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

我在这里工作： http://jsfiddle.net/ucpvP/

Answer 2

尝试使用如下所示的jQuery。

  function SaveData() //Your add function
    {
       var txt=$("#intro").html();
       $(document).append("<span id='abcd'>" + txt+ "</span>");
       var aa = $("#abcd").hmtl();
       alert(aa);
     }

Answer 3

您可以使用从未附加到DOM的DOM元素。我使用这个'清理'功能：

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

您可以使用自己的代码扩展该功能，以删除，更改和移动某些元素。

在不影响视图的情况下处理DOM数据

3 个答案: