HOWTO · jQuery

jQuery で要素を作成する

このチュートリアルでは、jQuery で HTML 要素を作成する方法を示します。

著者 Sheeraz Gul公開日 2022-06-21更新日 2023-01-30
このページの内容

createElement() は、コア JavaScript から HTML 要素を作成するためのメソッドです。jQuery には、同様の操作を実行するためのいくつかのメソッドがあります。

このチュートリアルでは、jQuery で HTML 要素を作成する方法を示します。

jQuery で要素を作成する

jQuery には、HTML 要素を作成するための 4つのメソッドがあります。

  1. append()-このメソッドは、選択した要素の最後に要素を追加します。
  2. prepend()-このメソッドは、選択した要素の先頭に要素を追加します。
  3. after()-このメソッドは、選択した要素の後に要素を追加します。
  4. 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 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.

著者プロフィールを見る
LinkedInFacebook