[Javascript] 요소 (생성, 삽입, 삭제)

요소 - 자바스크립트 or 제이쿼리를 활용해서 html 요소를 생성할 수 있음

 

자바스크립트

1. 요소 생성

• createElement : 요소(태그)를 만드는 메서드
• createTextNode : 글자를 만드는 메서드

let el_h1 = document.createElement("h1");
let txt_h1 = document.createTextNode("안녕하세요");

2. 요소 속성

• 속성 설정 : setAttribute('속성명', '속성값');
  setAttribute('class', 'minwoo')
• 속성값 찾기 : getAttribute('속성명');
  getAttribute('class'); //minwoo

3. 요소 삽입

• prependChild(삽입할 요소) : (첫번째) 자식으로 삽입
• appendChild(삽입할 요소) : (마지막) 자식으로 삽입

let el_h1 = document.createElement("h1");
let txt_h1 = document.createTextNode("안녕하세요");

el_h1.appendChild(txt_h1);

4. 요소 삭제

• removeChild(삭제할 요소)

5. 사용 예시

let el_ul = document.createElement("ul");
let el_li = document.createElement("li");
let txt_li = document.createTextNode("menu");

el_li.appendChild(txt_li);
el_ul.appendChild(el_li);
document.getElementsByClassName('box')[0].appendChild(el_ul);

---

제이쿼리( Jquery)

1. 요소 삽입

• prepend : 선택한 요소의 첫번째 자식
  prepend => $('선택자').prepend('삽입할 코드');
  prependTo => $('삽입할 코드').prepend('선택자');
• append : 선택한 요소의 마지막 자식
  append => $('선택자').append('삽입할 코드');
  appendTo => $('삽입할 코드').appendTo('선택자');
  • 주의 : css를 같이 명시하는 경우 
  • $(list).appendTo('body').css({color:'red'}) => red가 list 에 담아놓은 요소에 적용됨 $(list).appendTo('body').css({color:'red'}) => red가 list 에 담아놓은 요소에 적용됨

for(let i = 0; i < 2; i++) {
    let list = `<h1>제이쿼리 요소생성 ${i}</h1>`;
    $(list).appendTo('body').css({color: 'red'}); //body에 list 삽입해라
}

 

---

 클래스 변경

자바스크립트

1. 클래스 확인

• 요소.className : 특정 요소의 클래스 값을 문자 형태로 가져온다.
  (실수로라도) 해당 요소의 클래스 사이에 빈칸들이 있으면 split(" ")으로 분리시킬 때 방 번호 잡기 힘들다.
• 요소.classList - 배열로 받아온다.
  - (클래스가 하나만 있어도 0번방)
  - (읽기 전용 프로퍼티)

2. 클래스 추가

• 요소.classList.add('클래스명', '클래스명', '클래스명', ...)

3. 클래스 수정

• 요소.classList.replace("없앨 문자열", "삽입할 문자열")

4. 클래스 삭제

• 요소.classList.remove('클래스')
• 요소.classList.remove('클래스','클래스','클래스',.....)
• 요소.className = ""; <= 전부를 다 삭제할 경우

5. 클래스 토글 ⭐⭐⭐⭐⭐

• 해당 요소에 클래스가 있으면 삭제, 없으면 넣어줌
• 요소.classList.toggle('클래스')

6. 클래스 contains

• 해당 요소에 클래스가 있는지 확인
• 있으면 true, 없으면 false

사용 예시

html

<div id="wrap">
  <div class="size border font" id="box">box1</div>
  <div class="border" id="box2">box2</div>
</div>

css

<style>
    .size {
    width: 100px;
    height: 100px;
    }

    .border {
    border: 1px solid;
    }
    .font {
    font-size: 50px;
    }

    .bg_red {
    background-color: red;
    }

    .bg_green {
    background-color: green;
    }
</style>

javascript

let el_box = document.getElementById('box');
let el_box2 = document.getElementById('box2');

// 1) 확인
console.log(el_box);
console.log(el_box.className);
console.log(el_box.classList);

// 2) 추가
el_box.classList.add('bg_red');
el_box.classList += 'bg_red';
el_box2.classList.add('font', 'size', 'bg_red');
el_box2.classList += 'font size';

// 3) 수정
el_box2.classList.replace('bg_red', 'bg_green');

// 4) 삭제
el_box2.classList.remove('bg_green');

// 5) 모두 삭제
el_box2.className = '';

// 5) toggle
el_box2.classList.toggle('bg_red'); // 현재 el_box 에 bg_blue 없으니까 삽입
el_box2.classList.toggle('bg_red'); // 윗줄에서 넣고 왔으니까 있음. 그래서 삭제

let chk = true;
el_box.addEventListener('click', function(){
  // if(chk) {
  //     el_box.classList.add('bg_blue');
  // }
  // else {
  //     el_box.classList.remove('bg_blue');
  // }
  // chk=!chk

  el_box.classList.toggle('bg_blue');

  // 6) contains
  console.log(el_box.classList.contains('bg_blue'));
})
}

 

---

$.제이쿼리(Jquery)

1. 클래스 추가

• $('선택자').addClass('클래스명');

2. 클래스 삭제

• $('선택자').removeClass(); => 모든 클래스 삭제
• $('선택자').removeClass('클래스명');
• $('선택자').removeClass('클래스명 클래스명 클래스명'); => 삭제할 게 여러개면 , (콤마) 없이 빈칸으로만 넣으면 됨

3. 체이닝

• 선택자가 같으면 함수끼리 . (점)을 이용해서 붙여서 사용

4. 사용 예시

html

<input type="button" value="빨강" id="btn_red">
<input type="button" value="초록" id="btn_green">
<input type="button" value="파랑" id="btn_blue">
<div id="box"></div>

css

<style>
  #box {
  width: 300px;
  height: 300px;
  border: 1px solid;
  }

  .red {background-color: red;}
  .green {background-color: green;}
  .blue {background-color: blue;}
</style>

제이쿼리

$('#btn_red').click(function() {
    $('#box').addClass('red');
    $('#box').removeClass('green');
    $('#box').removeClass('blue');
})
$('#btn_green').click(function() {
    $('#box').removeClass('red');
    $('#box').addClass('green');
    $('#box').removeClass('blue');

})
$('#btn_blue').click(function() {
  // $('#box').removeClass('red green');
	$('#box').removeClass().addClass('blue') // => 체이닝
  // $('#box').addClass('blue')
})