jQuery

[jQuery] 10장 요소 추가 메소드, 삭제 및 복사 메소드

반응형

 

요소 추가 메소드

 

 

메소드 설 명
$(selector).
after(content)		 선택 요소 뒤에 content 추가
(형제 레벨로 추가) 
$(content).
insertAfter(selector)		 content를 selector 뒤에 추가
(after와 동일)

만일, content가 본문에 존재하면 그 요소를 제거
(기존의 위치에서 삭제)한 후 추가한다. (즉, 이동)
$(selector).
before(content)		 선택 요소 앞에 content 추가
(형제 레벨로 추가)
$(content).
insertBefore(selector)		 insertAfter와 동일
다만, 내부의 처음 위치에 추가

 

 

 

  • title속성 정보로 이미지 생성 후 추가하기 (DOM String 방식)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
p {
  border: 2px ridge burlywood;
  display: inline-block;
}
img {
    width: 300px;
}
</style>
</head>
<body>
    <h4>title속성 정보로 이미지 생성 후 추가하기</h4>
    <p title="mang3.jpg">온천곰</p> <br>
    <p title="mang12.gif">달린곰</p> <br>
    <p title="mang16.gif">집원하곰</p> <br>
    <p title="mang15.gif">발파닥곰</p> <br>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('p').on('click', function(){
        // 선택된 요소의 title속성을 src정보로
        //              내부 text정보를 alt정보로 활용
        let titleToSrc = $(this).attr('title');
        let txtToAlt = $(this).text();

        console.log(titleToSrc, txtToAlt);

        // JS방식 중 DOM String - 동적 요소 생성
        let v_img = "<img src='../images/" + titleToSrc + "' alt='" + txtToAlt + "'>";
        // appendChild() >> 노드 대상이므로 사용 불가
        // append() >> 화면상에 추가 해주지만 문자 형태로만 적용함 (태그파싱 되지 않은 상태)
        // innerHTML, insertAdjacentHTML()
        // this.innerHTML += v_img;
        this.insertAdjacentHTML('afterend', v_img);

    });
</script>
</body>
</html>

 

결과 화면1

 

 

 

  • title속성 정보로 이미지 생성 후 추가하기 (메소드 방식)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
p {
  border: 2px ridge burlywood;
  display: inline-block;
}
img {
    width: 300px;
}
</style>
</head>
<body>
    <h4>title속성 정보로 이미지 생성 후 추가하기</h4>
    <p title="mang3.jpg">온천곰</p> <br>
    <p title="mang12.gif">달린곰</p> <br>
    <p title="mang16.gif">집원하곰</p> <br>
    <p title="mang15.gif">발파닥곰</p> <br>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('p').on('click', function(){
        let titleToSrc = $(this).attr('title');
        let txtToAlt = $(this).text();

        console.log(titleToSrc, txtToAlt);

        // JS방식 중 메소드 사용 - 동적 요소 생성
        let v_img2 = document.createElement('img');
        v_img2.src = "../images/" + titleToSrc;
        v_img2.alt = txtToAlt;
        v_img2.title = 'js동적요소2';
        this.appendChild(v_img2);
    });
</script>
</body>
</html>

 

결과 화면2

 

 

 

  • title속성 정보로 이미지 생성 후 추가하기 (jq방식)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
p {
  border: 2px ridge burlywood;
  display: inline-block;
}
img {
    width: 300px;
}
</style>
</head>
<body>
    <h4>title속성 정보로 이미지 생성 후 추가하기</h4>
    <p title="mang3.jpg">온천곰</p> <br>
    <p title="mang12.gif">달린곰</p> <br>
    <p title="mang16.gif">집원하곰</p> <br>
    <p title="mang15.gif">발파닥곰</p> <br>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('p').on('click', function(){
        // 선택된 요소의 title속성을 src정보로
        //              내부 text정보를 alt정보로 활용
        let titleToSrc = $(this).attr('title');
        let txtToAlt = $(this).text();

        console.log(titleToSrc, txtToAlt);
        
        // jq방식 ($("tag"))
        // append(appendTo), prepend(prependTo), before(insertBefore), after(insertAfter)
        // $('<img src="../images/' + titleToSrc + '" alt="' + txtToAlt + '" title="jq동적요소1">').insertBefore(this);
        $(`<img src="../images/${titleToSrc}" alt="${txtToAlt}" title="jq동적요소1">`).insertBefore(this);
        // 아래와 같은 방식으로도 사용 가능
        
        $(this).prepend($('<img>', {
            src: '../images/' + titleToSrc,
            'alt': txtToAlt,
            "title": 'jq동적요소2'
        }));
    });
</script>
</body>
</html>

 

결과 화면3

 

 

 

삭제 및 복사 메소드

 

 

  • 삭제 메소드
메소드 설 명
$(selector).empty() Selector의 자식 요소를 삭제
$(selector).remove() Selector 및 selector의 자식 요소를 삭제
$(selector).remove(selector1) Selector 중에서 selector1에 해당하는 요소를 삭제
ex) $(‘p’).remove(‘.test’)  <p></p>  <p class=‘test’></p>

 

 

 

  • 복사 메소드
메소드 설 명
$(selector).clone() 선택 요소를 복사하고 선택
$(selector).clone(true/false) 선택 요소의 이벤트 처리기를 포함하여 복사하고 선택

 

 

 

삭제 메소드 예시

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
div {
  background-color: gold;
  height: 25px;
}
p {
  border: 3px solid gray;
}
</style>
</head>
<body>
    <button>empty</button>
    <button>remove</button>
    <button>remove(select)</button>

    <div>
        <p>Hello jQuery</p>
    </div>
    <div>
        <p>Hi jQuery</p>
    </div>
    <p>안녕하세요</p>
    <p id="pp">Hi jQuery입니다</p>
    

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $(':button').eq(0).on('click', function(){

        $('div').eq(0).empty(); // 디브1번의 자식만 지움

    });

    // 대상 요소 중 두번째 자식인 것
    $('button:nth-child(2)').on('click', function(){
        $('div').eq(1).remove(); // 대상요소(디브2)와 그 자식요소를 모두 지움
    });

    // 대상 요소 타입(button) 중 3번째인 것
    $(':button:nth-of-type(3)').on('click', function(){
        $('p').remove('#pp'); // 모든 p중 특정 조건인 항목만 지움
    });
</script>
</body>
</html>

 

결과 화면4-1 : empty 예시

 

결과 화면4-2 : remove 예시

 

결과 화면4-3 : remove(select) 예시

 

 

 

복사 메소드

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>인수로 true설정시 이벤트처리기도 함께 복사</p>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('p').on('click', function(){
        $(this).css('font-size', '+=2px');
    });
</script>
</body>
</html>

 

결과 화면5 : 글자 선택 시 글자크기가 커짐

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="p1">인수로 true설정시 이벤트처리기도 함께 복사</p>
    <button>clone()</button>
    <button>clone(true)</button>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('p').on('click', function(){
        $(this).css('font-size', '+=1px');
    });

    $('button:nth-of-type(1)').on('click',function(){
        // p요소를 대상으로 복사시 배수로 복사되므로 특정한 요소만 복사대상으로 지정할 필요 있음
        let v_cln = $('#p1').clone(); // 복사
        $('body').append(v_cln); // 붙여넣기
    });

    $('button:nth-of-type(2)').on('click',function(){
        let v_cln2 = $('#p1').clone(true);
        $('body').append(v_cln2);
    });
</script>
</body>
</html>

 

결과 화면6-1 : 글자 클릭 후 clone()를 클릭 시 커진 글자가 복사됨

 

결과 화면5-2 :  글자 클릭 후 clone(true)를 클릭 시 커진 글자가 복사됨 => 안에 true를 적지 않으면 생략됨

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 12장 이벤트  (0) 2024.02.23
[jQuery] 11장 스타일시트 관련 메소드, 넓이와 높이 관련 메소드  (0) 2024.02.23
[jQuery] 9장 get/set 메소드3  (0) 2024.02.22
[jQuery] 8장 get/set 메소드2  (0) 2024.02.22
[jQuery] 7장 get/set 메소드1  (0) 2024.02.22

티스토리툴바