insertAdjacentHTML() 이벤트 리스너

insertAdjacentHTML()이벤트 리스너는 모든 브라우저에서 지원된다.

예제)

var html_to_insert = "<p>New paragraph</p>";

//.innerHTML destroys event listeners ( 무조건 맨앞이나 맨뒤 )

//사용방법

document.getElementById('mydiv').innerHTML += html_to_insert;

// with .insertAdjacentHTML, preserves event listeners

//location 옵션은 삽일할 위치를 지정합니다 각 옵션종류와 위치는 다음과 같습니다.

//종류 ('beforebegin', 'afterbegin', 'beforeend', 'afterend')

//사용방법

document.getElementById('mydiv').insertAdjacentHTML('locaction', html_to_insert);

<!-- beforebegin --> //div 이전에 삽입

<div id="mydiv">

  <!-- afterbegin --> //div.Innertext의 맨 앞부분

  <p>Existing content in #mydiv</p>

  <!-- beforeend --> //div.Innertext의 맨 뒤부분

</div>

<!-- afterend --> //div 이후 삽입