1. document.createElement() / appendChild() / clondeNode() / importNode()
<div id="test">
<!-- ์๋
-->
</div>
<script>
var a = document.createElement('p');
a.innerHTML = '์๋
';
document.querySelector('#test').appendChild(a);
</script>
- document.createElement() : html ์๋ฃ๋ฅผ ์์ฑํ๋ค.
- element.appendChild() : ํ ๋
ธ๋๋ฅผ ํน์ ๋ถ๋ชจ ๋
ธ๋์ ์์ ๋
ธ๋ ๋ฆฌ์คํธ ์ค ๋ง์ง๋ง ์์์ผ๋ก ๋ถ์ธ๋ค. (ํ ๋
ธ๋๋ ๋ฌธ์์์ ๋ ์ง์ ์ ๋์์ ์กด์ฌํ ์ ์์ผ๋ฏ๋ก, ๋
ธ๋๊ฐ ์ด๋ฏธ ๋ถ๋ชจ๊ฐ ์๋ค๋ฉด ์ญ์ ๋๊ณ ์๋ก์ด ์์น๋ก ์ด๋ํ๋ค.)
* append()์์ ์ฐจ์ด์ : append๋ jquery์์ ์ง์ํ๋ ๋ฉ์๋๋ก, ์์ ์๋ฐ์คํฌ๋ฆฝํธ์ธ appendChild()์ ๋ค๋ฅด๋ค. ๋ํ append๋ .append(`<p>๋ด์ฉ</p>`) ์ฒ๋ผ ์์๋ฅผ ๋ฐ๋ก ๋๋ ค๋ฐ์ ์ ์๋ ๋ฐ๋ฉด, appendChild()๋ createElement๋ก ๋ฐ๋์ ์์๋ฅผ ๋ฐ๋ก ์์ฑํด์ผ๋ง ํ๋ค. - cloneNode() : ์ appendChild์ ๋ค๋ฅด๊ฒ ์๋ก์ด ๋ถ๋ชจ์ ๋ฐ์ผ๋ก ๋ถ๊ธฐ ์ ์ ๋ ธ๋๋ฅผ ๋ณต์ ํ๋ค. (์ด ๋ฉ์๋๋ก ๋ง๋ค์ด์ง ๋ ธ๋๋ค์ ์๋์ ์ผ๋ก ๋ฌธ์์ ์ ์ฉ๋์ง ์๋๋ค.)
- importNode() : appendChild()๋ ๋ค๋ฅธ ๋ฌธ์๋ก ๋ ธ๋๋ฅผ ์ด๋์ํค์ง ๋ชปํ๋ฏ๋ก, ๋ค๋ฅธ ๋ฌธ์๋ก ์ด๋์ํค๊ณ ์ถ๋ค๋ฉด ์ด ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค.
2. ๋ณ์์ html ์ ์ฅ / insertAdjacentHTML()
<div id="test">
<!-- ์๋
-->
</div>
<script>
var a = '<p>์๋
</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', a);
</script>
- ๋ณ์ ์์ html์ ์ ์ฅํ ์ ์๋ค.
element.insertAdjacentHTML(position, text)
html ํน์ ํ ์คํธ๋ฅผ ํ์ฑํ๊ณ , ํน์ ์์น DOM tree ์์ ์ํ๋ node๋ค์ ์ถ๊ฐํ๋ค. ์ด๋ฏธ ์ฌ์ฉ์ค์ธ element๋ ๋ค์ ํ์ฑํ์ง ์๋๋ค. (= element ์์ ์กด์ฌํ๋ element๋ฅผ ๊ฑด๋๋ฆฌ์ง ์๋๋ค) ๊ทธ๋์ innerHTML๊ณผ ๋ค๋ฅด๋ค. (innerHTML ๋ณด๋ค ์์ ์ด ๋ ๋๋ฏ๋ก ๋ ๋น ๋ฆ.)
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
position
- 'beforebegin' : element ์์ ๋ถ๋๋ค
- 'afterbegin' : element ์์ ๊ฐ์ฅ ์ฒซ๋ฒ์งธ child
- 'beforeend' : element ์์ ๊ฐ์ฅ ๋ง์ง๋ง child
- 'afterend' : element ๋ค์ ๋ถ๋๋ค
์ถ์ฒ : ์ฝ๋ฉ์ ํ https://codingapple.com/ / MDN https://developer.mozilla.org/ko/