如何使用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 Developer 查看执行 js 后生成的代码。

- 编辑

也是 FF 的有用扩展 - FireBug。

Answer 2

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

使用 firebug，您可以检查 DOM：

_{（来源： mozilla.org ）}

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