在Javascript中动态创建div

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

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

如果我也能用jquery库创建它，那就太好了

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属性设置为给定的标记。因此，它非常灵活且有限。

仅使用普通DOM：

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

---

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

---

jquery函数可以工作，但它在body的和处插入，这是因为我的testcase末尾有“appendTo”。删除它并在您认为合适的时候使用它，即使我删除document.body.appendChild（div）；它确实不起作用，jQuery不使用innerHTML来附加到

“body”

。它使用一个脱离DOM的

innerHTML

技巧和一个文档片段从HTML中创建DOM元素——为了实际将生成的DOM节点添加到文档中，jQuery使用常规DOM方法，如

element.appendChild

等。

setAttribute（'class'，'…'）

是正确的，但在IE pre-v8中不起作用，因为IE不知道属性（

class

）和属性（

className

）之间的区别。您应该始终优先使用DOM级别1 HTML属性（

mydiv.id='hidden'；mydiv.className='notice'；mydiv.style.display='none'

）而不是

setAttribute

），部分原因是这些IE错误，部分原因是属性方式更简单、更易于阅读。我认为属性快捷方式是浏览器发明的东西，从来没有进入任何DOM规范。我懂了。谢谢你，波宾斯。