본문 바로가기
개발 공부/JS, JQuery

element 요소 조작 (append, prepend, before, after, parent)

by momo'sdad 2023. 11. 24.

Element 요소 조작 (append, prepend, before, after, parent)

 

기존 요소의 내부에 추가

.append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다

.prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다

.appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다.

.prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다.

​

기존 요소의 외부에 추가

.before() 선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다.

.after() 선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다.

.insertBefore() 선택한 요소를 해당 요소의 앞쪽에 추가한다.

.insertAfter() 선택한 요소를 해당 요소의 뒤쪽에 추가한다.

​

상위 요소 선택 및 삭제

$(this).parent().parent().remove()

<ol id="list"> <li>첫 번째 아이템</li> <li>두 번째 아이템</li> </ol>

​

$("#list").append("<li>새로 추가된 아이템</li>");

$("#list").prepend("<li>새로 추가된 아이템</li>");

$("<span>jQuery입니다.</span>").appendTo("p");

$("<span>jQuery입니다.</span>").prependTo("p");

​

$("p").before("<div>" + (++i) + "번째 문장입니다.</div>");

$("p").after("<div>" + (++i) + "번째 문장입니다.</div>");​

 

​

Style(CSS)변경

1) $(selector).css("css속성", "속성값")

$("#a").css("href", "mypage")

2) class로 변경 (브라우저 다크모드 변경할때 활용하기 좋은 기능)

클래스 추가 : $(selector).addClass("클래스 속성값");

클래스 제거 : $(selector).removeClass("클래스 속성값");

클래스 토글 : $(selector).toggleClass("클래스 속성값");

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
  <title>Title</title>
  <style>
      .basic {
          width: 200px;
          height: 150px;
          border: 1px solid;
          text-align: center;
          line-height: 150px;
          margin-top: 20px;
      }
      .change {
          background-color: blue;
      }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
          integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
          crossorigin="anonymous"></script>
  <script>
      $(function () { 
          $("#add").click(function () { //버튼 클릭 시, 클래스 추가
              $("div").addClass("change");
          });

          $("#remove").click(function () {//버튼 클릭 시, 클래스 제거
              $("div").removeClass("change");
          });
          $("#toggle").click(function () {//버튼 클릭 시, 클래스 추가 또는 제거
              $("div").toggleClass("change");
          });
      });
  </script>
</head>

<body>
<button id="add">클래스 추가</button>
<button id="remove">클래스 삭제</button>
<button id="toggle">클래스 토글</button>

<div class="basic">DIV</div>
</body>
</html>

 

​

요소의 추가 삭제

1. 추가

1) 선택자 다음에 추가 : $(selector).append("추가 요소"); (부모자식관계)

2)선택자 이전에 추가 : $(selector).prepend("추가 요소"); (부모자식관계)

3) 특정 요소 밑에 추가 : $(selector).after("추가 요소"); (형제 관계)

4) 특정 요소 위에 추가 : $(selector).before("추가 요소"); (형제 관계)

​

2. 삭제

1) 요소 및 하위 요소 삭제 : $(selector).remove();

2) 하위요소만 삭제 : $(selector).empty();

 $("#remove").click(() => {//id=remove 버튼 클릭 시,
        $(".parent").remove();//자식 요소를 포함하여, 선택된 요소도 함께 삭제
    });
    $("#empty").click(() => { //id=empty 버튼 클릭 시,
        $(".parent").empty();//선택된 요소의 자식 요소만 삭제
    });

 

​

요소의 관계로 요소를 선택하는 방법

​

1.상위요소 선택

1)한 단계 위의 요소(부모) : $(selector).parent();

2)윗 단계의 모든 요소(조상) : $(selector).parents();

3)선택요소와 지정 요소 사이의 조상 : $(selector).parentsUntil(other_selector);

 

<body>
<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>
  </div>

  <div style="width:500px;">div (grandparent)
    <p>p (direct parent)
      <span>span</span>
    </p>
  </div>
</div>
<button id="parent">부모선택</button>
<button id="parents">상위요소선택</button>
<button id="until">...까지선택</button>
<hr>
<a href="relation_ch">계층찾기</a>
</body>



  $("#parent").click(function () {
        $("span").parent().css({    //.parnet().parent()로, 두단계 위의 조상 선택 가능
            "color": "red",
            "border": "2px solid red"
        })
    });
    $("#parents").click(function () {
        $("span").parents().css({
            "color": "red",
            "border": "2px solid red"
        });
    });
    $("#until").click(function(){
        $("span").parentsUntil(".ancestors").css({
            "color": "red",
            "border": "2px solid red"
        });
    })

 

​

2. 하위 요소 선택

1)한 단계 하위 요소(자식) : $(selector).children();

2) 자손 요소 : $(selector).find("filter"); <-filter에 특정선택자를 넣거나 *로 모든 하위 요소를 선택할 수 있다.

  $("#child").click(function () {
        $(".parents").children().css({
            "color": "red",
            "border": "2px solid red",
        });
    });
    $("#find").click(function () {      
        $(".parents").find("span").css({     //하위 요소 중, span요소 선택
            "color": "red",
            "border": "2px solid red",
        });
    });
    $("#find2").click(function () {
        $(".parents").find("*").css({       //모든 하위 요소 선택
            "color": "red",
            "border": "2px solid red",
        });
    });

 

3. 형제 요소 선택

1) 모든 형제 요소 : $(selector).siblings();

2) 다음 요소 : $(selector).next();

3) 다음 위치의 모든 요소 : $(selector).nextAll();

4) 다음 요소부터 특정 요소까지 : $(selector).nextUntil(other_selector);

5) 이전요소 : $(selector).prev();

6) 이전 모든 요소 : $(selector).prevAll();

7) 이전 요소부터 특정 요소까지 : $(selector).prevUntil(other_selector);

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
          integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
          crossorigin="anonymous">
  </script>
  <style>
      .siblings * {
          display: block;
          border: 2px solid #a7a7a7;
          color: #a7a7a7;
          padding: 5px;
          margin: 15px;
      }
  </style>
</head>
<body>
<div class="siblings">div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>
<button id="sib">sibling</button>
<button id="next">next</button>
<button id="nextAll">next all</button>
<button id="nextUntil">next until</button>
<hr>
<a href="filtering">필터링</a>
</body>
<script>
    $("#sib").click(function () {
        //선택자 요소 를 제외한 형제 요소 선택
        $("h2").siblings().css({
            "color":"red",
            "border":"2px solid red"
        })
    });
    $("#next").click(function () {
        $("h2").next().css({
            "color":"red",
            "border":"2px solid red"
        });
    });
$("#nextAll").click(function () {
        $("h2").nextAll().css({
            "color":"red",
            "border":"2px solid red"
        });
    });
$("#nextUntil").click(function () {
        $("h2").nextUntil("h6").css({
            "color":"red",
            "border":"2px solid red"
        });
    });
</script>
</html>

 

4. 필터링

1) 선택한 요소들 중 첫번째 : $(selector).first();

2) 선택한 요소들 중 마지막 : $(selector).last();

3) n번째 요소 : $(selector).eq(n); ->n : 숫자(index, 0부터 시작)

4) 선택한 요소들 중 재선택 : $(selector).filter(other_selector);

5) 선택한 요소들 중 특정 요소만 빼고 선택 : $(selector).not(other_selector);

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>선택 필터링</title>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
          integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
          crossorigin="anonymous">
  </script>
</head>
<body>
<div style="border: 1px solid black;">
  <p>첫번째 div 엘리먼트</p>
  <p class="sel">두번째 div 엘리먼트</p>
  <p>세번째 div 엘리먼트</p>
  <p class="sel">네번째 div 엘리먼트</p>
</div>
<br>
<div style="border: 1px solid black;">
  <p>다섯번째 div 엘리먼트</p>
  <p class="sel">여섯번째 div 엘리먼트</p>
  <p>일곱번째 div 엘리먼트</p>
  <p class="sel">여덟번째 div 엘리먼트</p>
</div>
<button id="first">first</button>
<button id="last">last</button>
<button id="eq">eq(2)</button>
<button id="filter">filter</button>
<button id="not">not</button>
</body>
<script>
    $("#first").click(function () {
        $("p").first().css("background-color", "yellow");//계층에 상관없이, 모든 p요소들 중에 첫 p를 찾는다.
    });
    $("#last").click(function () {
        $("p").last().css("background-color","yellow"); //계층에 상관없이, 모든 p요소들 중에 마지막 p를 찾는다.
    });

    $("#eq").click(() => {
        $("p").eq(2).css("background-color", "yellow"); //index 2 : 세번재 p 선택
    });
    $("#filter").click(()=>{
        $("p").filter(".sel").css("background-color", "yellow");  //클래스 sel을 가진 p 선택
    });
    $("#not").click(()=>{
        $("p").not(".sel").css("background-color", "yellow"); //클래스 sel을 가진 p를 제외
    });
</script>
</html>

 

동적 이벤트 바인딩 처리(추가된 요소의 이벤트 처리)

새로운 요소가 렌더링 후에 생성되었기 때문에, 다시 문서를 분석하여 이벤트를 처리하도록 작성한다.

on() 메서드를 사용할 때 선택 대상은 문서이며, 처리할 이벤트와 이벤트가 발생되는 요소를 on()메소드에 함께 작성한다.

문법)

$(selector).on("event", "childselector", function(){...}); 
//selector 안의 자식요소(childSelector)에게 이벤트를 줄 수 있다. 
//selector에 document나 다른 조상 요소의 선택자 작성
반응형
저작자표시

'개발 공부 > JS, JQuery' 카테고리의 다른 글

JQuery(제이쿼리) 이벤트 사용시 $(this)의미와 활용  (0) 2023.11.25
Ajax 사용 - Ajax 메소드 $.ajax() $.get() $.post() .load()  (0) 2023.11.24
!important 선언으로 CSS 스타일 적용  (0) 2023.11.24
닷홈 호스팅하는 법(무료 웹 호스팅)  (0) 2023.11.23
Jquery(제이쿼리) 차트만들기, Ajax를 이용해 날씨차트만들기  (1) 2023.10.24

관련글

티스토리툴바