資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 將一個 div 的內容複製到另一個 div 中？
我們可以使用 jQuery 的 html() 方法將一個 div 的內容複製到另一個 div 中。在 jQuery 中，還有許多其他方法，例如 clone()、append() 和 appendTo() 等，都可以用來複制內容。jQuery 是一個 JavaScript 庫，旨在簡化 HTML DOM 樹的遍歷和操作，以及事件處理、CSS 動畫和 Ajax。在本教程中，我們將使用 jQuery 中的不同方法將一個 div 的內容複製到另一個 div 中。
使用 html() 方法
使用 jQuery html() 函式是將一個 div 的內容複製到另一個 div 中最簡單的方法。html() 方法用於檢索或設定元素的 HTML 內容。在不帶任何引數呼叫時，它返回元素當前的 HTML 內容；在帶有引數呼叫時，它將元素的 HTML 內容設定為提供的值。此技術非常適合快速複製 div 的完整內容。
示例
例如，考慮以下 HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div>output</div>
<br />
<div id="result"></div>
</body>
<script>
var html = $("#source").html();
console.log(html);
document.getElementById("result").innerHTML = html;
</script>
</html>
使用 append() 和 appendTo() 方法
使用 append() 和 appendTo() 方法是另一種流行的技術，用於複製 div 的內容。使用這些技術，可以將一個元素新增到另一個元素中。append() 方法用於將元素新增到選定元素中，而 appendTo() 方法用於將選定元素新增到一個元素中。這些技術非常適合複製 div 的整個結構，包括其子元素。
示例
例如，考慮以下 HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target">
<p>This is the target div.</p>
</div>
</body>
<script>
$("#source").children().appendTo("#target");
</script>
</html>
這將把源 div 的所有子元素新增到目標 div 中，最終結果將是：
使用 clone() 方法
最後，我們有 clone() 方法。clone() 方法用於複製選定的元素。當您希望複製 div 的內容而不將其從原始位置移除時，此方法非常方便。此方法適用於複製 div 並將其附加到另一個元素。
示例
例如，考慮以下 HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target"></div>
</body>
<script>
$('#source').clone().appendTo('#target');
</script>
</html>
這將建立源 div 的副本並將其附加到目標 div。最終結果將與之前相同：
使用 innerHTML 顯示輸出
我們可以使用 div 元素的 innerHTML 屬性來顯示輸出，而不是使用 console.log() 函式。
示例
例如，考慮以下 HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id="source">
<p>This is the source div.</p>
<p>It contains some text.</p>
</div>
<div id="target"></div>
<div id="result"></div>
</body>
<script>
var html = $("#source").html();
document.getElementById("result").innerHTML = html;
</script>
</html>
這將把源 div 的內容複製到結果 div 並將其顯示在螢幕上。
結論
在本博文中，我們學習瞭如何使用 jQuery 將一個 div 的內容複製到另一個 div 中。我們已經使用了 html() 方法、append() 和 appendTo() 方法以及 clone() 方法來實現這一點。我們還展示瞭如何使用 innerHTML 屬性在螢幕上顯示結果。透過理解這些方法及其區別，您將能夠為您的特定用例選擇最佳解決方案。
7K+ 次瀏覽
