[JS] DOM - part3

要素の作成方法

1) createElement(tag)

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

2) createTextNode(text)

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

要素を挿入する方法

1) before(node or DOMString)

2) prepend(node or DOMString)

3) append(node or DOMString)

4) after(node or DOMString)

<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)

<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를 삽입함

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

Reference