javascript/

Question

을 사용하여 HTML에서 div 태그를 동적으로 추가하는 방법 하나의 div를 동적으로 만들고 다른 div에 추가하려고합니다.

  (js) var divtag = document.createElement("div"); 
       divtag.innerHTML = xmlhttp.responseText;//Ajax call working fine 
       document.getElementById('con').appendChild(divtag); 

HTML :

enter code here <div id="con"></div> 

내가 AJAX 호출에서 무엇입니까 다음은 오/피도 내가 브라우저에서 볼 수 있어요,하지만 난 소스보기를하고있는 중이 야 때 나는, 좋아하다 div 및 그 내용을 볼 수 없습니다. 다음과 같이 입력해야합니다.

enter code here <div id="con"> 
       <div> 
      Contents added @ runtime 
     </div> 
      </div> 

누군가 내가 잘못 가고있는 부분을 제안 할 수 있습니까?

Answer 1

기본적으로 브라우저에 생성 된 코드가 표시되지 않지만 Firefox 확장 웹 개발자를 사용하여 js를 실행 한 후 생성 된 코드를 볼 수 있습니다.

- 편집

또한 FF - FireBug의 유용한 확장입니다.

Answer 2

firebug - 제 의견에는 최고의 파이어 폭스 웹 개발 애드온을 사용하십시오. 우리의 DOM에

Answer 3

로드 DIV 당신이 "사기"를 가지고 있습니까 : 불을 지르고와

당신은 DOM을 검사 할 수 있습니다?

var divtag = document.createElement("div"); 
divtag.innerHTML = xmlhttp.responseText;//Ajax call working fine 
// See before adding a child, does it exist? 
alert(document.getElementById('con')); 
document.getElementById('con').appendChild(divtag); 

이 코드를 어디에 두 었는지 알 수 없습니다. 엘레멘트를 검사/지정하기 전에 DOM을로드해야한다는 것이 중요합니다. 이러한 실수를 피하려면 다음을 수행하십시오.

function addEvent(obj, evType, fn){ 
if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, false); 
    return true; 
} else if (obj.attachEvent){ 
    var r = obj.attachEvent("on"+evType, fn); 
    return r; 
} else { 
    return false; 
} 
} 
addEvent(window, 'load', function() { 
     var divtag = document.createElement("div"); 
     divtag.innerHTML = xmlhttp.responseText;//Ajax call working fine 
     // See before adding a child, does it exist? 
     alert(document.getElementById('con')); 
     document.getElementById('con').appendChild(divtag); 
});