在Javascript中动态创建一个div答案

【问题标题】：Create a div dynamically in Javascript在Javascript中动态创建一个div
【发布时间】：2009-12-25 20:40:58
【问题描述】：

如何在函数中动态创建 div，如下所示：

<div id="mydiv" class="notice" style="display:none;">
</div>

如果我也可以使用 jquery 库创建它，那就太好了。

【问题讨论】：

标签： javascript jquery html dynamic

【解决方案1】：

var div = document.createElement("div");
div.setAttribute("id", "mydiv");

div.className = "notice";
div.style.display = "none";

// test case, append the div to the body
document.body.appendChild(div);

或使用 jQuery

$("<div id='mydiv' class='notice' style='display: none;'></div>").appendTo("body");

要小心，因为在 jQuery 方法中创建了一个元素，并且它的 innerHTML 属性设置为给定的标记。因此，它既灵活又有限。

【讨论】：

jquery 函数可以工作，但它插入到 body 的 and 处
那是因为我的测试用例末尾有“appendTo”。删除它并在你认为合适的时候使用它。
即使我删除了 document.body.appendChild(div);真的不行，
jQuery 不使用innerHTML 附加到"body"。它使用 off-DOM innerHTML 技巧和文档片段从提供的 HTML 中创建 DOM 元素——实际上将生成的 DOM 节点添加到文档中，jQuery 使用常规 DOM 方法，例如element.appendChild等

【解决方案2】：

使用 jQuery 创建元素将允许它被变量名引用

var div=$(document.createElement('div'))
  .attr({id: 'myDiv'})
  .addClass('myNotice');

现在我们可以在脚本的其余部分引用div 变量。

//put it where you want
$('#someElement').append(div.hide());

//bind some events
div.mouseenter(function(){
  var offset=div.offset();
  //more code
});

【讨论】：

【解决方案3】：

仅使用普通 DOM：

var mydiv = document.createElement("div");
mydiv.setAttribute("id", "mydiv");
mydiv.setAttribute("class", "notice");
mydiv.setAttribute("style", "display:none;");
whateverContainer.appendChild(mydiv);

【讨论】：

setAttribute ('class', '...') 是正确的，但在 IE pre-v8 中不起作用，因为 IE 不知道属性 (class) 和属性 (className) 之间的区别。您应该始终使用 DOM 级别 1 HTML 属性 (mydiv.id= 'hidden'; mydiv.className= 'notice'; mydiv.style.display= 'none') 而不是 setAttribute，部分原因是这些 IE 错误，部分原因是属性方式更简单、更易于阅读。
嗯。我认为属性快捷方式是浏览器发明的东西，从未进入任何 DOM 规范。我看到I am wrong。谢谢，bobince。