Question

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

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

如果我可以使用jquery库创建它，那将是非常好的。

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

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

Answer 3

仅使用普通DOM：

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

在Javascript中动态创建div

3 个答案: