Jam's story

[JQuery] 동적으로 태그 만들기 , 속성가져오기, 요소 추가, contents 가져오기 본문

WEB/JQuery

[JQuery] 동적으로 태그 만들기 , 속성가져오기, 요소 추가, contents 가져오기

애플쩀 2022. 6. 13. 15:56

contents가져올때 사용하는 제이쿼리메소드

-text()

-html()

-val()

 

속성 가져올 때 사용하는 제이쿼리 메소드

-attr()

 

요소추가

-append()/ appendTo()

-prepend()/prependTo()

- before() / after()

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 15:32:14</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex04_02.html</h3>
<p>Lorem, ipsum dolor.</p>
<p>Quos, modi hic.</p>
<script>
    $("p").append("<b>Append Text</b>");
    

</script>
<ol>
    <li>Lorem, ipsum dolor.</li>
    <li>Dicta, dolor ex.</li>
    <li>Rem, quasi alias.</li>
</ol>
<script>
    // $("ol").append("<li>New item4</li>"); //마지막 자식으로 추가 
    //$("ol").prepend("<li>New item4</li>"); //첫번쨰 자식으로 추가 
    
    //$("<li>New Item5</li>").appendTo($("ol"));
    //$("<li>New Item5</li>").prependTo($("ol"));
    
     //3번째 자리에 넣기 
     ///<li>New item 3</li>
    //alert($("ol>li").eq(2).html());


    //3번째꺼 전에 붙이기 
   //$("ol>li").eq(2).before("<li>New Item 3</li>");

    //2번째꺼 뒤에 붙이기 
    //$("ol>li").eq(1).after("<li>New Item 2</li>");

/*     //모든 li태그 제거 
    $("ol").html("");
    $("ol").empty();
    $("ol").remove(); //ol태그 자체를 제거  */
    
    //body태그안에 p태그 만드는 3가지 방법 
    var txt1="<p>text 1</p>";
    
    var txt2=$("<p></p>").text("text2");
    
    var txt3=document.createElement("p");
    txt3.innerHTML="Text 3";
    $("body").append(txt1,txt2,txt3);


    //제거할 요소를 필터링 할 수 있다. 
    $("body>p").remove(".box");


</script>
</body>
</html>

 

 

 

 

저작자표시 (새창열림)

'WEB > JQuery' 카테고리의 다른 글

[JQuery] 요소 넓이, 높이  (0) 2022.06.13
[JQuery] css 조작 방법  (0) 2022.06.13
[JQuery] 애니메이션 중지  (0) 2022.06.13
[JQuery] selector 선택자  (0) 2022.06.13
[JQuery] 구문  (0) 2022.06.12
'WEB/JQuery' Related Articles more
Comments