HOWTO · jQuery

jQuery에서 요소 만들기

이 튜토리얼은 jQuery에서 HTML 요소를 생성하는 방법을 보여줍니다.

작성자 Sheeraz Gul게시일 2022-06-21업데이트 2024-02-15

createElement()는 핵심 JavaScript에서 HTML 요소를 생성하는 메소드입니다. jQuery에는 유사한 작업을 수행하는 몇 가지 방법이 있습니다.

이 튜토리얼은 jQuery에서 HTML 요소를 생성하는 방법을 보여줍니다.

jQuery에서 요소 만들기

jQuery에는 HTML 요소를 만드는 네 가지 방법이 있습니다.

  1. append() - 이 메서드는 선택한 요소의 끝에 요소를 추가합니다.
  2. prepend() - 이 메서드는 선택한 요소의 시작 부분에 요소를 추가합니다.
  3. after() - 이 메서드는 선택한 요소 뒤에 요소를 추가합니다.
  4. 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>

위의 코드는 주어진 요소 앞에 여러 요소를 생성합니다. 출력 참조:

여러 요소 앞에 추가

after() 및 before() 메서드를 사용하여 jQuery에서 요소 생성

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