如何使用javascript /动态地在html中附加div标签

Question

我正在动态创建一个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调用得到的o / p是好的，我也可以在浏览器中查看它，但是当我在做一个视图源时，我无法看到div及其内容。 它应该是：

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

有人可以建议我哪里出错吗？

Answer 1

默认情况下，您不会在浏览器中看到生成的代码，但您可以使用Firefox扩展Web开发人员查看执行js后生成的代码。

- 编辑

也是FF的有用扩展 - FireBug。

Answer 2

使用firebug - 我认为最好的firefox网站开发插件。

使用firebug，您可以检查DOM：

Answer 3

你的DOM上加载了“con”div吗？

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);
});