jQuery html(), append(), empty()

내일배움캠프: Node.js_4기

2일차 TIL

~오늘의 수강 과목~

1. 사전캠프: 왕초보 웹개발 종합반 2주차 (이범규 튜터님)

_ 제이쿼리 메서드: html(), append(), empty()

 

---

html()

앞에서 선택한 부분(= $('예시') )의 내용을 가져오거나, 다른 내용으로 바꿀 수 있음

자바스크립트

제이쿼리

 

append()

선택된 요소의 마지막 부분에 새로운 요소를 추가

 

empty()

선택된 요소의 내용을 지움

 

function checkResult() {
    let people = [
        { 'name': '서영', 'height': 165 },
        { 'name': '현아', 'height': 170 },
        { 'name': '영환', 'height': 175 },
        { 'name': '서연', 'height': 162 },
        { 'name': '지용', 'height': 190 },
        { 'name': '예지', 'height': 168 }
    ]
    $('#q2').empty()
    people.forEach((a) => {
        let name = a['name']
        let height = a['height']
        let temp_html = `<p>${name}의 키는 ${height}cm 입니다.</p>`
        $('#q2').append(temp_html)
    })
}

이번 강의에서는 empty()를 통해 기존의 요소를 없애 백지로 만들고 forEach()를 통해 데이터 반복문을 준비한 후 append()를 통해 해당 자리에 붙여주는 식으로 예시 작성

이론을 따로따로 보는 것보다 유기적으로 이해가 가능했다.

 

 

---

이렇게 제이쿼리를 통해 코드의 길이를 단축할 수 있다.

3주차 강의를 통해 메서드를 반복적으로 학습하고 나니 2주차의 관련 부분이 조금 더 익숙하게 느껴져 추가로 정리해보았다.