jQuery 추가 요소

jQuery를 사용하면 새로운 요소/콘텐츠를 쉽게 추가할 수 있습니다.

새 HTML 콘텐츠 추가

새 콘텐츠를 추가하는 네 가지 jQuery 메서드를 알아봅니다.

append() - 선택한 요소의 끝에 콘텐츠 삽입
prepend() - 선택한 요소의 시작 부분에 내용 삽입
after() - 선택한 요소 뒤에 내용 삽입
before() - 선택한 요소 앞에 내용 삽입

jQueryappend() 메소드

jQueryappend() 메소드는 선택한 요소의 끝에 내용을 삽입합니다.

예제

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").append(" <b>追加文本</b>。");
            });
            $("#btn2").click(function(){
                $("ol").append("<li>追加列表项</li>");
            });
        });
    </script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
    <li>列表项  1</li>
    <li>列表项  2</li>
    <li>列表项  3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

프로그램을 실행하고 사용해 보세요

jQuery prepend() 메서드

jQuery prepend() 메서드는 선택한 요소의 시작 부분에 내용을 삽입합니다.

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

프로그램을 실행하고 시험해 보세요

append() 및 prepend() 메소드를 통해 여러 가지 새로운 요소를 추가하세요

위의 예에서는 몇 가지 새로운 요소만 추가합니다. 선택한 요소의 시작 부분에 요소 /끝 부분에 텍스트/HTML을 삽입합니다.

그러나 append() 및 prepend() 메서드는 매개변수를 통해 무제한의 새 요소를 받을 수 있습니다. 텍스트/HTML은 위의 예와 같이 jQuery를 통해 생성되거나 JavaScript 코드 및 DOM 요소를 통해 생성될 수 있습니다.

아래 예에서는 몇 가지 새로운 요소를 만듭니다. 이러한 요소는 텍스트/HTML, jQuery 또는 JavaScript/DOM을 사용하여 생성할 수 있습니다. 그런 다음 add() 메서드를 통해 이러한 새 요소를 텍스트에 추가합니다(prepend()에도 유효).

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>

프로그램을 실행하여 시도해 보세요

jQuery after() 및 before() 메서드

jQuery after() 메서드는 선택한 요소 뒤에 내용을 삽입합니다.

jQuery before() 메서드는 선택한 요소 앞에 내용을 삽입합니다.

예

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("img").before("<b>之前</b>");
            });
            $("#btn2").click(function(){
                $("img").after("<i>之后</i>");
            });
        });
    </script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg"  height="150" width="150">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

프로그램을 실행하고 사용해 보세요

after() 및 before() 메서드를 통해 여러 가지 새로운 요소를 추가합니다

after() 및 before() 메서드는 수신할 수 있습니다. 매개변수를 통해 새로운 요소를 무제한으로 생성할 수 있습니다. 새로운 요소는 텍스트/HTML, jQuery 또는 JavaScript/DOM을 통해 생성될 수 있습니다.

아래 예에서는 몇 가지 새로운 요소를 만듭니다. 이러한 요소는 텍스트/HTML, jQuery 또는 JavaScript/DOM을 사용하여 생성할 수 있습니다. 그런 다음 after() 메서드(before()에도 유효)를 통해 이러한 새 요소를 텍스트에 삽입합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        function afterText(){
            var txt1="<b>I </b>";                    // 使用 HTML 创建元素
            var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
            var txt3=document.createElement("big");  // 使用 DOM 创建元素
            txt3.innerHTML="jQuery!";
            $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
        }
    </script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg"  height="150" width="150">
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>

프로그램을 실행하고 사용해 보세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>之前</b>"); }); $("#btn2").click(function(){ $("img").after("<i>之后</i>"); }); }); </script> </head> <body> <img src="https://img.php.cn/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150"> <br><br> <button id="btn1">之前插入</button> <button id="btn2">之后插入</button> </body> </html>

제출하다 코드 재설정

자동운전