javascript_요소생성

요소 생성

• createElement : 요소(태그)를 만드는 메서드(함수)
• createTextNode : 글자를 만드는(취급하는) 메서드
  let el_h1 = document.createElement("h1");
let txt_h1 = document.createTextNode("안녕하세요");

요소 속성

• ex) 속성 : style, class, id 등
• 요소를 생성하고 난 후에 속성을 적용할 수 있다.
• 속성 설정 : setAttribute('속성명', '속성값')
  setAttribute('class', 'abc')
el_h1.setAttribute("class", "txt");
• 속성값 찾기 : getAttribute
  getAttribute('class',) -> abc

요소 삽입

• prependChild : (첫번째) 자식으로 삽입
• appendChild : (마지막번째) 자식으로 삽입
  el_h1.appendChild(txt_h1);
document.getElementsByTagName('body')[0].appendChild(el_h1);

요소 삭제

• 나.remove(삭제할요소) - 나 자신 사라짐
  el_h1.remove(el_h1);
• 부모.removeChild(삭제할 요소) - 부모 기준 자식 잡아야함
  el_box.removeChild(el_h1);
  • 부모 자식관계를 끊어서 DOM 트리에서 해제할 뿐이기 때문에 메모리상에는 요소가 남아있다.
• 나.parentNode.removeChild(삭제할 요소)
  el_h1.parentNode.removeChild(el_h1);
  • 나 -> 부모 -> 부모기준으로 나를 지움.
  • 메모리상에 요소가 남지 않는다.
    하지만 요즘에는 기기 메모리들이 많아져서 많은 차이는 없다.
    해당 코드가 좋긴 하나 큰 차이는 없으니 편한걸로 쓰는 게 좋다.

예시

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

// 요소 속성
el_h1.setAttribute("class", "txt");

// 요소 삽입
el_h1.appendChild(txt_h1);
document.getElementsByTagName('body')[0].appendChild(el_h1);


// 요소삽입
let el_ul = document.createElement("ul");

// 요소 삽입
for(let i = 0; i < 3; i++){
    let el_li = document.createElement("li");
    let txt_li = document.createTextNode("menu" + (i + 1));
    el_li.appendChild(txt_li);
    el_ul.appendChild(el_li);
}

document.getElementsByTagName('body')[0].appendChild(el_ul);

기타

• 위와같이 js에서 요소를 생성하고 속성까지 부여했을 때 해당 이름으로 style을 만들어서 적용중이라면 해당건은 적용이 된다.
• 위 방법대신 대놓고 innerHTML로도 가능
  el_ul.innerHTML += `<li>minu${i+1}</li>`;
  • createElement
    • DOM을 다루는 표준방식
    • HTML의 요소들을 객체로 접근
    • innerHTML보다는 느림
    • 정석
  • innerHTML
    • HTML을 몽땅 문자열로 넘겨서 사용
    • createElement보다 빠름
    • 사용하기 쉽고 편함