insertAdjacentHTML

1. κ°œμš”

μš”μ†Œλ₯Ό μΆ”κ°€ν•˜κΈ° μœ„ν•΄ innerHTML ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜λ©΄ κΈ°μ‘΄ μš”μ†Œλ₯Ό λͺ¨λ‘ μ œκ±°ν•œ ν›„ μƒˆλ‘­κ²Œ 생성이 λœλ‹€. μ΄λŠ” λΉ„νš¨μœ¨μ μ΄λΌ ν•  수 μžˆλ‹€. 이λ₯Ό ν•΄κ²°ν•  수 μžˆλŠ” insertAdjacentHTML λ©”μ„œλ“œλ₯Ό μ•Œμ•„λ³΄μž.


2. insertAdjacentHTML

insertAdjacentHTML(position, DOMString) λ©”μ„œλ“œλŠ” κΈ°μ‘΄ μš”μ†Œλ₯Ό μ œκ±°ν•˜μ§€ μ•ŠμœΌλ©΄μ„œ μœ„μΉ˜λ₯Ό μ§€μ •ν•΄ μƒˆλ‘œμš΄ μš”μ†Œλ₯Ό μ‚½μž…ν•œλ‹€.

첫 번째 인수둜 전달할 수 μžˆλŠ” λ¬Έμžμ—΄μ€ beforebegin, afterbegin, beforeend, afterend의 4가지이닀.

insertAdjacentHTML position

2-1. insertAdjacentHTML - beforebegin

insertAdjacentHTML - beforebegin

2-2. insertAdjacentHTML - afterbegin

insertAdjacentHTML - afterbegin

2-3. insertAdjacentHTML - beforeend

insertAdjacentHTML - beforeend

2-4. insertAdjacentHTML - afterend

insertAdjacentHTML - afterend

3. insertAdjacentHTML μž₯점과 단점

insertAdjacentHTML λ©”μ„œλ“œλŠ” κΈ°μ‘΄ μš”μ†Œμ— 영ν–₯을 μ£Όμ§€ μ•Šκ³  μƒˆλ‘­κ²Œ μ‚½μž…λ  μš”μ†Œλ§Œ νŒŒμ‹±ν•˜μ—¬ μžμ‹ μš”μ†Œλ‘œ μΆ”κ°€ν•œλ‹€λŠ” 것이닀. μ΄λŠ” innerHTML ν”„λ‘œνΌν‹°λ³΄λ‹€ 효율적이고 λΉ λ₯΄λ‹€.

ν•˜μ§€λ§Œ innerHTML ν”„λ‘œνΌν‹°μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ HTML λ§ˆν¬μ—… λ¬Έμžμ—΄μ„ νŒŒμ‹±ν•˜λ―€λ‘œ 크둜슀 μ‚¬μ΄νŠΈ μŠ€ν¬λ¦½νŒ… 곡격에 μ·¨μ•½ν•˜λ‹€.


4. Conclusion

insertAdjacentHTML λ©”μ„œλ“œλŠ” 아직 μ‚¬μš©ν•΄ λ³Έ 적이 μ—†λŠ” λ©”μ„œλ“œμ΄λ‹€. innerHTML ν”„λ‘œνΌν‹°λ§Œ μ‚¬μš©μ„ ν•΄λ³΄μ•˜λ‹€. μ•žμœΌλ‘œλŠ” 더 효율적인 insertAdjacentHTML λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•΄λ³΄λ„λ‘ ν•˜μž. λ˜ν•œ μœ„μΉ˜κΉŒμ§€ μ •ν•  수 μžˆμœΌλ‹ˆ ν™œμš©ν•  수 μžˆλŠ” λ°©μ•ˆ λ”μš± λ§Žμ„ 것이닀.


μ°Έκ³ 

λ„μ„œ - λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive: μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ κΈ°λ³Έ κ°œλ…κ³Ό λ™μž‘ 원리


πŸ“… 2022-10-15

Last updated