innerHTML의 한계와 해결

innerHTML은 매우 유용하지만 한계가 있습니다. var target = '<li id="swim" class="insertClass">수영</li><li id="soccer">축구</li>'; 이와 같이 작성한 것을 한번에 DOM 트리에 반영할 수 있는 것이 innerHTML입니다. 그런데 여기서 간과해서는 안되는 것이 innerHTML의 위치가 child Node라는 것입니다. 즉, 위치가 정해져 있다는 것입니다 만약, parent 노드의 앞과 뒤의 Sibiling Node 위치에 위의 HTML 스크립트(Fragment)를 반영하려면 어떻게 해야할까요? innerHTML만으로는 이를 처리할 수 없습니다. 따라서 DOM에서 제공하는 메소드를 사용해야 하며, 이 또한 IE와 다르므로 IE에서 제공하는 메소드를 사용해야 합니다 IE는 insertAdjacentHTML()로 처리할 수 있으며 DOM은 createRange(), setStartBefore()/setStartAfter(), createContextualFragment()로 처리할 수 있습니다. 소스 코드는 여러분이 만들어 보시기 바랍니다. 다음에 실행이 되는 소스 코드를 게재하겠습니다.