[JS] DOM - part3

요소를 생성하는 메서드

1) createElement(tag)

• createElement() 메서드는 HTML 요소 노드를 생성한다.

const div = document.createElement('div');
console.log(div);

2) createTextNode(text)

• createTextNode() 메서드는 텍스트 노드를 생성한다.

const textNode = document.createTextNode('Hello World.');
console.log(textNode);

요소를 삽입하는 메서드

1) before(node or DOMString)

• element.before() 메서드는 선택된 요소 노드의 이전에 요소 노드나 문자열을 삽입한다.

2) prepend(node or DOMString)

• element.prepend() 메서드는 선택된 요소 노드의 맨 앞에 요소 노드나 문자열을 삽입한다.

3) append(node or DOMString)

• element.append() 메서드는 선택된 요소 노드의 마지막에 요소 노드나 문자열을 삽입한다.

4) after(node or DOMString)

• element.after() 메서드는 선택된 요소 노드의 다음에 요소 노드나 문자열을 삽입한다.

<ol>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

const ol = document.querySelector('ol');

ol.before('before'); // <ol> 앞에 문자열 'before'를 삽입함
ol.after('after'); // <ol> 뒤에 문자열 'after를 삽입함

let liFirst = document.createElement('li');
liFirst.innerHTML = 'prepend';
ol.prepend(liFirst); // <ol>의 첫 항목으로 liFirst를 삽입함

let liLast = document.createElement('li');
liLast.innerHTML = 'append';
ol.append(liLast); // <ol>의 마지막 항목으로 liLast를 삽입함

위와 같은 코드가 있을 때, 해당 결과는 아래와 같다.

5) insertAdjacentHTML(position, text)

• element.insertAdjacentHTML의 첫 번째 매개변수는 element 기준의 상대적인 위치를 나타내며 아래의 종류들이 존재한다.

  • beforebegin 1)과 동일
  • afterbegin 2)와 동일
  • beforeend 3)과 동일
  • afterend 4)와 동일

<ol>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

const ol = document.querySelector('ol');

ol.insertAdjacentHTML('beforebegin', 'before'); // <ol> 앞에 문자열 'before'를 삽입함

ol.insertAdjacentHTML('afterend', 'after'); // <ol> 뒤에 문자열 'after를 삽입함

ol.insertAdjacentHTML('afterbegin', '<li>prepend</li>'); // <ol>의 첫 항목으로 liFirst를 삽입함

ol.insertAdjacentHTML('beforeend', '<li>append</li>'); // <ol>의 마지막 항목으로 liLast를 삽입함

만약 insertAdjacentHTML방식이 아닌 prepend를 사용하게 된다면,

const ol = document.querySelector('ol');
ol.prepend('<li>prepend</li>');

---

Reference

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