如何在jQuery中创建div元素?


当前回答

d = document.createElement('div');
$(d).addClass(classname)
    .html(text)
    .appendTo($("#myDiv")) //main div
.click(function () {
    $(this).remove();
})
    .hide()
    .slideToggle(300)
    .delay(2500)
    .slideToggle(300)
    .queue(function () {
    $(this).remove();
});

其他回答

我刚刚为此制作了一个小型jQuery插件。

它遵循您的语法:

var myDiv = $.create("div");

DOM节点ID可以指定为第二个参数:

var secondItem = $.create("div","item2");

严重吗?没有。但是这个语法比$(“<div></div>”)好,而且它的价值非常高。

(答案部分复制自:jQuery document.createElement等效项?)

创建内存DIV

$("<div/>");

添加单击处理程序、样式等,最后将其插入到DOM中的目标元素选择器中:

$(“<div/>”{//此处的属性text:“单击我”,id:“示例”,“class”:“myDiv”,//('class'在引号中更好)css:{颜色:“红色”,fontSize:“3em”,光标:“指针”},日期:{mouseenter:函数(){console.log(“请…”+$(this).text());},单击:函数(){console.log(“嗨!我的ID是:”+this.ID);}},追加:“<i>!!</i>”,appendTo:“body”//最后,附加到任何选择器}); // << 这里不需要做任何事情,因为我们在内部定义了财产。<script src=“//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

与ian的答案类似,但我找不到适当处理财产对象声明中方法使用的示例,所以就这样。

<div id="foo"></div>

$('#foo').html('<div></div>');
div = $("<div>").html("Loading......");
$("body").prepend(div);    

如果您使用Jquery>1.4,您最好使用Ian的答案。否则,我将使用此方法:

这与celoron的答案非常相似,但我不知道他们为什么使用document.createElement而不是Jquery表示法。

$("body").append(function(){
        return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
            .attr("id","myDivId")
            .addClass("myDivClass")
            .css("border", "solid")                 
            .append($("<p/>").html("I think, therefore I am."))
            .append($("<p/>").html("The die is cast."))
});

//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

我还认为,在这种情况下,将append()与回调函数一起使用更可读,因为您现在马上就可以看到将要向主体添加的内容。但这是一个品味问题,在编写任何代码或文本时总是如此。

通常,在JQuery代码中使用尽可能少的HTML,因为这大部分是意大利面代码。它容易出错,很难维护,因为HTML字符串很容易包含拼写错误。此外,它将标记语言(HTML)与编程语言(Javascript/Jquery)混合在一起,这通常是一个坏主意。