jQuery で要素を作成する
- jQuery で要素を作成する
-
jQuery で
append()メソッドを使用して要素を作成する -
jQuery で
prepend()メソッドを使用して要素を作成する -
jQuery で
after()およびbefore()メソッドを使用して要素を作成する
createElement() は、コア JavaScript から HTML 要素を作成するためのメソッドです。jQuery には、同様の操作を実行するためのいくつかのメソッドがあります。
このチュートリアルでは、jQuery で HTML 要素を作成する方法を示します。
jQuery で要素を作成する
jQuery には、HTML 要素を作成するための 4つのメソッドがあります。
append()-このメソッドは、選択した要素の最後に要素を追加します。prepend()-このメソッドは、選択した要素の先頭に要素を追加します。after()-このメソッドは、選択した要素の後に要素を追加します。before()-このメソッドは、選択した要素の前に要素を追加します。
それぞれの方法について説明し、例を試してみましょう。
jQuery で append() メソッドを使用して要素を作成する
append() メソッドは、選択した要素の最後に要素を追加します。構文は、1つの 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>
上記のコードは、一度に 1つの 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() メソッドを使用して 3つの新しい段落を作成します。出力を参照してください：
jQuery で prepend() メソッドを使用して要素を作成する
prepend() メソッドは、選択した要素の先頭に要素を追加します。構文は 1つの 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>
コードは、パラグラフ 2 の前にパラグラフを追加します。出力を参照してください：
同様に、複数の要素を付加します。例を参照してください：
<!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>
上記のコードは、指定された要素の前後に複数の要素を追加します。出力を参照してください：
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