HOWTO · jQuery
在 jQuery 中建立元素
本教程演示如何在 jQuery 中建立 HTML 元素。
createElement() 是來自核心 JavaScript 的用於建立 HTML 元素的方法。在 jQuery 中，有一些方法可以執行類似的操作。
本教程演示如何在 jQuery 中建立 HTML 元素。
在 jQuery 中建立元素
jQuery 中有四種建立 HTML 元素的方法：
append()- 此方法將在所選元素的末尾新增元素。prepend()- 此方法將在所選元素的開頭新增元素。after()- 此方法將在選定元素之後新增元素。before()- 此方法將在所選元素之前新增元素。
讓我們討論並嘗試每種方法的示例。
使用 append() 方法在 jQuery 中建立元素
append() 方法將元素新增到所選元素的末尾。新增一個 HTML 元素的語法很簡單。
參見示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoButton").click(function(){
$("#two").append(" <p> This is paragraph three </p>");
});
});
</script>
</head>
<body>
<p>This is paragraph One.</p>
<p id="two">This is paragraph two.</p>
<button id="DemoButton">Append paragraph</button>
</body>
</html>
上面的程式碼將一次新增一個 HTML 段落元素。見輸出：
我們還可以使用 append() 方法建立多個元素。參見示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function append_paragraphs() {
var ELement1 = "<p>This is a paragraph two. </p>"; // paragraph with HTML
var ELement2 = $("<p></p>").text("This is a paragraph three."); // paragraph with jQuery
var ELement3 = document.createElement("p");
ELement3.innerHTML = "This is a paragraph four"; // paragraph with DOM
$("body").append(ELement1, ELement2, ELement3); // Append all paragraph elements
}
</script>
</head>
<body>
<p>This is a paragraph one.</p>
<button onclick="append_paragraphs()">Append Paragraphs</button>
</body>
</html>
上面的程式碼將使用 append() 方法建立三個新段落。見輸出：
使用 prepend() 方法在 jQuery 中建立元素
prepend() 方法將元素新增到所選元素的開頭。一個 HTML 元素的語法很簡單。
參見示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoButton").click(function(){
$("#two").prepend(" <p> This is the new paragraph</p>");
});
});
</script>
</head>
<body>
<p>This is paragraph One.</p>
<p id="two">This is paragraph two.</p>
<button id="DemoButton">Append paragraph</button>
</body>
</html>
該程式碼將在第二段之前附加一段。見輸出：
同樣，我們預先新增多個元素。參見示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function Prepend_paragraphs() {
var ELement1 = "<p>This is a paragraph one. </p>"; // paragraph with HTML
var ELement2 = $("<p></p>").text("This is a paragraph two."); // paragraph with jQuery
var ELement3 = document.createElement("p");
ELement3.innerHTML = "This is a paragraph three"; // paragraph with DOM
$("body").prepend(ELement1, ELement2, ELement3); // Prepend all paragraph elements
}
</script>
</head>
<body>
<p>This is a the last paragraph.</p>
<button onclick="Prepend_paragraphs()">Prepend Paragraphs</button>
</body>
</html>
上面的程式碼將在給定元素之前建立多個元素。見輸出：
在 jQuery 中使用 after() 和 before() 方法建立元素
after() 方法將在給定元素之後建立一個元素，類似地，before() 方法將在給定元素之前建立一個元素。
請看下面兩個方法的例子。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("h1").before("<b> Element Before </b>");
});
$("#button2").click(function(){
$("h1").after("<b> Element After </b>");
});
});
</script>
</head>
<body>
<h1>Delfstack</h1>
<br><br>
<button id="button1">Insert element before</button>
<button id="button2">Insert element after</button>
</body>
</html>
上面的程式碼將在給定元素之前和之後建立元素。見輸出：
同樣，我們可以使用 after() 和 before() 方法建立多個元素。參見示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function After_Element() {
var Element1 = "<b>This </b>"; // element with HTML
var Element2 = $("<b></b>").text("is "); //with jQuery
var Element3 = document.createElement("b"); // with DOM
Element3.innerHTML = "Delftstack.com.";
$("h1").after(Element1, Element2, Element3); // Insert new elements after h1
}
function Before_Element() {
var Element1 = "<b>This </b>"; // element with HTML
var Element2 = $("<b></b>").text("is "); //with jQuery
var Element3 = document.createElement("b"); // with DOM
Element3.innerHTML = "Delftstack.com.";
$("h1").before(Element1, Element2, Element3); // Insert new elements before h1
}
</script>
</head>
<body>
<h1>Delfstack</h1>
<br><br>
<p>Create Elements after the h1.</p>
<button onclick="After_Element()">Insert after</button>
<p>Create Elements before the h1.</p>
<button onclick="Before_Element()">Insert before</button>
</body>
</html>
上面的程式碼將在給定元素之前和之後新增多個元素。見輸出：
