Javascript 在不影响视图的情况下操作DOM数据你好，世界介绍 var txt=document.getElementById（“intro”）.innerHTML； var el=document.createElement（“span”）； el.innerHTML=txt； var aa=el.getElementById（“abcd”）.innerHTML；警报（aa）；_Javascript_Dom

Javascript 在不影响视图的情况下操作DOM数据你好，世界介绍 var txt=document.getElementById（“intro”）.innerHTML； var el=document.createElement（“span”）； el.innerHTML=txt； var aa=el.getElementById（“abcd”）.innerHTML；警报（aa）；

javascript dom

Javascript 在不影响视图的情况下操作DOM数据你好，世界介绍 var txt=document.getElementById（“intro”）.innerHTML； var el=document.createElement（“span”）； el.innerHTML=txt； var aa=el.getElementById（“abcd”）.innerHTML；警报（aa）；,javascript,dom,Javascript,Dom,以上是一个简单的片段。实际上，我有一个HTML编辑器，当用户保存数据时，我应该只保存所需的内容。在这里，我获取一个元素的内容，并使用DOM对其进行操作，然后将详细信息传递给服务器。这样我就不会更改页面内容（用户视图保持不变），他/她将继续编辑文档上面是一个简单的例子，但在实际情况中，我必须删除、更改和移动某些元素。上述代码失败el.getElementById（“abcd”）.innerHTML。欣赏任何指针。您可以创建一个隐藏的iframe来处理所有更改，从而创建一个单独的DOM，然后简单地

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

上面是一个简单的例子，但在实际情况中，我必须删除、更改和移动某些元素。上述代码失败

el.getElementById（“abcd”）.innerHTML

。欣赏任何指针。

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

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

var-iframe；
if（document.createElement&（iframe=document.createElement（'iframe'））{
iframe.name=iframe.id=“externalDocument”；
iframe.className=“隐藏”；
document.body.appendChild（iframe）；
var外部文档；
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.open（）；
外部文档。写入（“”）；
externalDocument.close（）；
/*在这里进行操作*/
var txt=document.getElementById（“intro”）.innerHTML；
var el=document.createElement（“span”）；
el.innerHTML=txt；
/*将对象附加到externalDocument*/
externalDocument.body.appendChild（el）；
/*引用要操作的外部文档*/
var aa=externalDocument.getElementById（“abcd”）.innerHTML；
警报（aa）；
}
/*已完成操作-删除iFrame*/
文件。removeChild（iframe）；
}

我让它在这里工作：

尝试使用下面给出的jQuery

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

function SaveData（）//添加函数
{
var txt=$（“#简介”）.html（）；
$（文档）。追加（“+txt+”）；
var aa=$（“#abcd”）.hmtl（）；
警报（aa）；
}

您可以使用从未附加到DOM的DOM元素。我使用此“清理”功能：

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

函数清理（str）{
var tester=document.createElement（'div'），
无效，结果；
tester.innerHTML=str；
//我不允许的元素
无效=tester.querySelectorAll（'script，object，iframe，style，hr，canvas'）；
//清理（删除不需要的图元）
对于（var i=0；我为什么不直接将元素添加到文档中，而使用styledisplay:none，然后您可以对其进行操作，然后将其删除？好的，我明白您为什么不想将其添加到页面中，因为id会与现有的发生冲突。忽略我的第一条注释我必须尝试这个概念。我每次都需要删除这个iframe。希望如此这适用于所有浏览器。我在最后添加了代码以删除iframe。它应该适用于所有浏览器。
  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);