在 jQuery 中建立元素
Sheeraz Gul
2023年1月30日
2022年6月15日
- 在 jQuery 中建立元素
-
使用
append()方法在 jQuery 中建立元素 -
使用
prepend()方法在 jQuery 中建立元素 -
在 jQuery 中使用
after()和before()方法建立元素
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>
上面的程式碼將在給定元素之前和之後新增多個元素。見輸出：
Author: Sheeraz Gul
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook