JQuery STEP 6 - Manipulation

★ JQuery 태그 조작

 

1. 콘텐츠 조작

• innerText, textContent > text()

alert($('#box').text());
$('#box').text('홍길동');

• innerHTML > html()

$('box').html('<b>안녕하세요.</b>')

• value > val()

alert($('#txt1').val());
$('#txt1').val('값을 대입합니다.');

 

 

2. 속성조작

• BOM : obj.prop
• DOM : obj.setAttribute(key, value) , obj.getAttribute(key)
• HTML 속성을 조작하는 메소드

obj.attr('name')
obj.attr('name', value)

• JavaScript 프로퍼티를 조작하는 메소드(HTML 속성에는 없고, JavaScript에만 있는 프로퍼티)

obj.prop('name')
obj.prop('name', value)

• 사용 ex)

$('#txt1').attr('size' , 50);
$('#txt1').prop('size', 50)

• 사용 ex2)

$('#txt1')
    .attr('size', 50)
    .attr('maxlength', 10);

$('#txt1').arttr({
    size : 50,
    maxlength : 10
});

 

 

3. 태그 생성

• 이미지 추가

$('#box').html('<img src="images/catty01.png">');

• 이미지 추가2

$('#box').append(`<img src="images/catty0${n}.png">`);  //막내 추가
$('#box').prepend(`<img src="images/catty0${n}.png">`); //첫째 추가
n++;

• 이미지 추가3
• jQuery 함수 기능
• 1. 태그 검색
• 2. 자바스크립트 객체 > jQuery 변환
• 3. 문자열 > 태그 생성

//방법 1
$('#box').append(
        $(`<img src="images/catty0${n}.png">`)
                .css('border', '5px solid black')
                .click(function() {
                    alert(this.src);
                })
    );
    n++;

});

let n = 1;

//방법 2
$(`<img src="images/catty0${n}.png">`)
        .css('border', '5px solid black')
        .click(function() {
            alert(this.src);
        })
        .appendTo($('#box'));

    n++;

});

let n = 1;

• 버튼을 눌렀을 경우 생성, 이미지를 클릭하면 삭제

$(`<img src="images/catty0${n}.png">`)
    .css('border', '5px solid black')
    .click(function() {
        // alert(this.src);
        $(this).remove();
    })
    .appendTo($('#box'));

n++;

• 실행 결과