Mozilla 한국 커뮤니티

innerHTML 로 된 것들 중 일부를 appendChild 로 변경하려고 하고 있습니다.

그런데 innerHTML 은 기존의 있는 값들을 지우고 하기 때문에...

그냥 내용 교체를 위해서는 o.innerHTML = val; 와 같이 하면 되고, 내용을 추가하려면 o.innerHTML = o.innerHTML + val; 와 같이 했습니ㅏㄷ.

그런데 appendChild 의 경우 후자의 경우처럼 되는데...

전자와 같이 기존의 것을을 덮어쓰려면 어떻게 해야 할까요?

조언 부탁드립니다.

아래 Sample 코드처럼 replaceChild 를 사용하시면 됩니다.

Code: Select all

<script>
function replaceSpan(){

    var newSpan = document.createElement("span");
    var newText =&#172; 
	document.createTextNode("on top of the astounded zebra");
    newSpan.appendChild(newText);

    var para = document.getElementById("example3");
    var spanElm = document.getElementById("ex3Span");
    var replaced = para.replaceChild(newSpan,spanElm);
}
</script>

참조 URL

하지만 Child 가 여러 개일 경우엔 하위 ChildNode를 remove 를 한 뒤에 append 나 replace 를 해야겠네요.

Mozilla 한국 커뮤니티

innerHTML, appendChild 질문

innerHTML, appendChild 질문

replaceChild 를 이용하시면 됩니다.