[jQuery]利用jQuery的clone方法複製HTML物件

原先所做的監控系統網站採用polling的方式，定時向伺服器請求資訊，這是一種很直覺、簡單可以達成監控的作法。
為了提升效能，決定改用Server-push的方式，在伺服器端執行監控，當資料有異動時才將資訊push至前端進行更新。

經Google大神開示後，目前很多網站皆使用SignalR的這項技術來完成，這邊先稍微紀錄一下，以後有空再來好好研究這到底是甚麼鬼。

交代完背景故事，移回到正題。

由於前端改為被動的狀態，故接收到差異的資訊後，頁面的更動就必須完全仰賴JavaScript了。

以下是我遇到的狀況。

在前端頁面中找到一個特定的DOM Element將其複製、處理後，再將其放置另一個特定的容器中。

使用實際例子來說明。

Source:
    Hello!!
    Howard


Target:

預計的效果是複製source中的物件、移除name，再將其放置target中。(Source後方的文字會保留著！)

當下第一反應便想起當初所研究使用的$.extend()方法，只需利用jQuery選擇器選出該Element，複製、處理、貼上、搞定！

馬上動手試看看，可以進入jsfiddle點擊按鈕看看會發生甚麼事。

https://jsfiddle.net/howard10335/84ywsd6z/

從結果可以看到，原生物件被操作了，Howard不見了(甚麼？！)、Hello的文字也被移動了！

說好的複製物件呢？

爬文後發現，原來$.extend是針對JavaScript的物件上進行複製，JavaScript物件複製後，仍然指向相同的HTML物件。而針對畫面上Element的複製則必須使用.clone()。

修改後程式如下。

馬上再來試看看。

https://jsfiddle.net/howard10335/84ywsd6z/1/

很好，一切就如同我撰寫的劇本一樣執行著！

寫程式有時候就像扮演上帝的角色一樣，劇情發展完全由我來掌控，但我這個小上帝似乎還有更厲害的在後面操縱著...

(例如：複製JavaScript物件使用$.extend()，複製DOM Element則需使用.clone())

參考資料：
jQuery - .clone()
https://api.jquery.com/clone/
How to select a single cloned element?
http://stackoverflow.com/questions/28515045/how-to-select-a-single-cloned-element