insertAdjacentHTML
1. κ°μ
μμλ₯Ό μΆκ°νκΈ° μν΄ innerHTML νλ‘νΌν°λ₯Ό μ¬μ©νλ©΄ κΈ°μ‘΄ μμλ₯Ό λͺ¨λ μ κ±°ν ν μλ‘κ² μμ±μ΄ λλ€. μ΄λ λΉν¨μ¨μ μ΄λΌ ν μ μλ€. μ΄λ₯Ό ν΄κ²°ν μ μλ insertAdjacentHTML λ©μλλ₯Ό μμ보μ.
2. insertAdjacentHTML
insertAdjacentHTML(position, DOMString) λ©μλλ κΈ°μ‘΄ μμλ₯Ό μ κ±°νμ§ μμΌλ©΄μ μμΉλ₯Ό μ§μ ν΄ μλ‘μ΄ μμλ₯Ό μ½μ
νλ€.
첫 λ²μ§Έ μΈμλ‘ μ λ¬ν μ μλ λ¬Έμμ΄μ beforebegin, afterbegin, beforeend, afterendμ 4κ°μ§μ΄λ€.

2-1. insertAdjacentHTML - beforebegin

2-2. insertAdjacentHTML - afterbegin

2-3. insertAdjacentHTML - beforeend

2-4. insertAdjacentHTML - afterend

3. insertAdjacentHTML μ₯μ κ³Ό λ¨μ
insertAdjacentHTML λ©μλλ κΈ°μ‘΄ μμμ μν₯μ μ£Όμ§ μκ³ μλ‘κ² μ½μ
λ μμλ§ νμ±νμ¬ μμ μμλ‘ μΆκ°νλ€λ κ²μ΄λ€. μ΄λ innerHTML νλ‘νΌν°λ³΄λ€ ν¨μ¨μ μ΄κ³ λΉ λ₯΄λ€.
νμ§λ§ innerHTML νλ‘νΌν°μ λ§μ°¬κ°μ§λ‘ HTML λ§ν¬μ
λ¬Έμμ΄μ νμ±νλ―λ‘ ν¬λ‘μ€ μ¬μ΄νΈ μ€ν¬λ¦½ν
곡격μ μ·¨μ½νλ€.
4. Conclusion
insertAdjacentHTMLλ©μλλ μμ§ μ¬μ©ν΄ λ³Έ μ μ΄ μλ λ©μλμ΄λ€.innerHTMLνλ‘νΌν°λ§ μ¬μ©μ ν΄λ³΄μλ€. μμΌλ‘λ λ ν¨μ¨μ μΈinsertAdjacentHTMLλ©μλλ₯Ό μ¬μ©ν΄λ³΄λλ‘ νμ. λν μμΉκΉμ§ μ ν μ μμΌλ νμ©ν μ μλ λ°©μ λμ± λ§μ κ²μ΄λ€.
μ°Έκ³
λμ - λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive: μλ°μ€ν¬λ¦½νΈμ κΈ°λ³Έ κ°λ κ³Ό λμ μ리
π 2022-10-15
Last updated