[javascirpt] 글씨 넣기

https://ko.javascript.info/modifying-document

문서 수정하기

 

요소 생성하기

let div = document.createElement('div');

let textNode = document.createTextNode('안녕하세요.');

 

 

요소 삽입하기

// 1. <div> 요소 만들기

let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정

div.className = "alert";

// 3. 내용 채워넣기

div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

 

 

삽입 메서드

document.body.append(div);

• node.append(노드나 문자열) – 노드나 문자열을 node 끝에 삽입합니다.
• node.prepend(노드나 문자열) – 노드나 문자열을 node 맨 앞에 삽입합니다.
• node.before(노드나 문자열) –- 노드나 문자열을 node 이전에 삽입합니다.
• node.after(노드나 문자열) –- 노드나 문자열을 node 다음에 삽입합니다.
• node.replaceWith(노드나 문자열) –- node를 새로운 노드나 문자열로 대체합니다.

 

insertAdjacentHTML/Text/Element

elem.insertAdjacentHTML(where, html)에서 첫 번째 매개변수는 elem을 기준으로 하는 상대 위치로, 다음 값 중 하나여야 합니다.

 

div.insertAdjacentHTML('beforebegin', '<p>안녕하세요.</p>');

div.insertAdjacentHTML('afterend', '<p>안녕히 가세요.</p>');

• 'beforebegin' – elem 바로 앞에 html을 삽입합니다.
• 'afterbegin' – elem의 첫 번째 자식 요소 바로 앞에 html을 삽입합니다.
• 'beforeend' – elem의 마지막 자식 요소 바로 다음에 html을 삽입합니다.
• 'afterend' – elem 바로 다음에 html을 삽입합니다.

 

cloneNode로 노드 복제하기

let div2 = div.cloneNode(true); // 깊은 복사

              div.cloneNode(false); // 후손 노드 복사 없이 element만 복제됩니다.

// 메시지 창 복제

div2.querySelector('strong').innerHTML = '안녕히 가세요!';

// 복제한 메시지 창 내용 수정

div.after(div2);

// 복제한 메시지 창을 기존 메시지 창 다음에 보여줌

 

 

DocumentFragment

DocumentFragment는 특별한 DOM 노드 타입으로, 여러 노드로 구성된 그룹을 감싸 다른 곳으로 전달하게 해주는 래퍼(wrapper)처럼 동작합니다.

let fragment = new DocumentFragment();

for(let i=1; i<=3; i++) {

   let li = document.createElement('li');

   li.append(i);

  fragment .append(li);

  }

div.append(fragment );

1,2,3

 

구식 삽입·삭제 메서드

 

let newLi = document.createElement('li');

newLi.innerHTML = 'Hello, world!';

 

부모.appendChild(newLi); // 여러번 명령어 눌러도 한번만 삽입됨

부모.insertBefore(newLi, 부모.children[1]); //위치 변경 가능

부모.replaceChild(node, oldChild); // 바꿔버림

부모.removeChild(node); // 삭제하고 삭제한 값을 리턴함

 

 

'document.write’에 대한 첨언

document.write는 웹페이지에 뭔가를 더할 때 쓰는 아주 오래된 메서드입니다.