製作一個與DOM元素相當的Javascript嗎？

-1

我在網頁中有一個DOM元素。我想製作JavaScript文件，我可以使用它在另一個網頁中創建這樣的DOM元素。製作一個與DOM元素相當的Javascript嗎？

這只是一次性轉換（我可能會做幾次，但;-)）。所以我只需要一些我可以在JavaScript控制檯中使用的東西。

我會單獨處理樣式（內聯樣式除外）。

有人可能已經做過類似的事情嗎？

UPDATE我想用它在以後完全不同的網頁上創建一個副本。我想用使用document.createElement等

來源

2014-11-09 Leo

要任何downvoter，請澄清你自己。消極的態度只會傷害這裏的合作。 – Leo 2014-11-09 13:30:45

在我看來，由DOM提供的基本序列化設施是你所需要的。即：使用outerHTML序列化您需要的內容，然後在接收端使用innerHTML對其進行反序列化。

假設這個HTML：

<div id="origin"> 
    <p id="foo">This is a test <a href="#">blah</a></p> 
    <p>We skip this</p> 
    <p id="bar">Another para.</p> 
</div> 
<div id="dest"> 
</div>

的div ID爲origin是我們模擬的起源，div id爲dest是模擬目標。在我們的模擬中，它們位於同一文檔中，但代碼將與起源和目的地使用不同的DOM樹。

現在下面的JavaScript，我已經來評論它做了什麼：

// Code for the origin side... 

// The elements to grab. 
var elems = [document.getElementById("foo"), 
      document.getElementById("bar")]; 

// A buffer to hold all the HTML... 
var buf = []; 
for (var i = 0; (elem = elems[i]); ++i) 
    buf.push(elem.outerHTML); 

// Serial contains the HTML of all the elements. 
var serial = buf.join(''); 
console.log(serial); 

// Above this point is what would run on the origin side. 
// And below is what would run on the destination side. 

// It can be added to the destination DOM just like this... 
var dest = document.getElementById("dest"); 
dest.innerHTML = serial; 

// 
// A more complicated scenario where the various nodes might need to go 
// in different places on the basis of the `id` attribute they have, could do this: 
// 
// var container = document.createElement("div"); 
// container.innerHTML = serial; 

// var child = container.firstChild; 
// while (child) { 
// // You have to grab the next node **before** moving the 
// // current one. 
// var next = child.nextSibling; 
// 
// var id = child.id; 
// 
// // ... Find where to put it on the basis of the id and add it to the DOM... 
// 
// child = next; 
// }

上面的代碼需要從源到目的地與IDS foo和bar，並將它們複製的段落。

A fiddle說明它是如何工作的。

我上面的例子是簡單的。在需要將信息與元素一起記錄的情況下（例如，可能因爲目標DOM中的最終位置取決於源DOM中的位置），您可以創建一個JSON結構來保存一組對象：

{ location .. where this element came from ..., 
    html: .. the value of `outerHTML` for the element }

，並使用JSON.stringify和JSON.parse從原點通過整體結構到目的地。

來源

2014-11-09 11:52:44 Louis

感謝路易斯，我首先想到這是行不通的（這就是爲什麼我問這個問題），但是當我得到答案的底部時，我看到了「JSON」。我認爲JSON.stringify會採取逃避問題的方法。我必須測試。 ;-) – Leo 2014-11-09 13:15:58

它使用JSON很好地工作。我添加了我的代碼作爲替代答案。 – Leo 2014-11-09 19:24:45

你可以做這樣的

var impl = document.implementation, 
    xmlDoc = impl.createDocument(namespaceURI, qualifiedNameStr, documentType), 
    htmlDoc = impl.createHTMLDocument(title); 

and it for old IEs 

var htmlDoc = new ActiveXObject("htmlfile");

來源

2014-11-09 04:54:45 vcrzy

感謝vcrzy，但我想保存JavaScript代碼並稍後在另一個網頁中使用它。 – Leo 2014-11-09 05:03:17

something like this 
<!DOCTYPE html> 
<html> 
<body> 

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul> 
<ul id="myList2"><li>Water</li><li>Milk</li></ul> 

<p id="demo">Click the button to copy an item from one list to another</p> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() 
{ 
var itm=document.getElementById("myList2").lastChild; 
var cln=itm.cloneNode(true); 
document.getElementById("myList1").appendChild(cln); 
} 
</script> 

<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p> 
</body> 
</html>

來源

2014-11-09 04:56:44 kki3908050

謝謝，kki3908050，但我想稍後在另一個文檔中使用它。不是在同一時間。 – Leo 2014-11-09 05:00:18

我拿@Louis的建議來使用innerHTML和JSON。爲了抓住我用這個元素，將彈出大多數必要的JavaScript代碼的窗口：

/** Copy nodes from one web page for insertion in a totally different 
* page at another time. 
*/ 
function copyNodes(idList){ 
    var nodesRec = {}; 
    function copyAsInnerHTML(id) { 
     var elt = document.getElementById(id); 
     var cont = elt.innerHTML; 
     cont = cont.replace(/^\s*/gm, ""); 
     nodesRec[id] = [elt.nodeName, cont]; 
    } 
    for (var i=0, id; id=idList[i++];) { 
     copyAsInnerHTML(id); 
    } 
    js = "insertAll("+JSON.stringify(nodesRec)+");\n\n\n"; 
    var doc = window.open("", "_blank").document; 
    var div = doc.createElement("div"); 
    var txt = doc.createTextNode(js); 
    div.appendChild(txt); 
    doc.body.appendChild(div); 
}

添加JavaScript代碼的其餘部分/更換元件是這樣的：

window.addEventListener("load", function() { 

    function insertAll(recAll) { 
     function insertThis(key, rec) { 
      var type = rec[0]; 
      var cont = rec[1]; 
      var oldElt = document.getElementById(key); 
      var elt = oldElt || document.createElement(type); 
      elt.setAttribute("id", key); 
      if (type === "script" || type === "style") { 
       elt.appendChild(document.createTextNode(cont)); 
       if (!oldElt) document.head.appendChild(elt); 
      } else { 
       elt.innerHTML = cont; 
       if (!oldElt) document.body.appendChild(elt); 
      } 
     } 
     Object.keys(recAll).forEach(function(key) { 
      insertThis(key, recAll[key]); 
     }); 
    } 

    // Now copy from above here: 
    insertAll({...}); 

});

來源

2014-11-09 19:23:08 Leo

呃，對不起@路易斯。感謝編輯。 ;-) – Leo 2014-11-09 20:01:18

製作一個與DOM元素相當的Javascript嗎？

回答

相關問題