如何在jQuery中创建div元素?


当前回答

如果它只是一个空div,这就足够了:

$("#foo").append("<div>")

or

$("#foo").append("<div/>")

它给出了相同的结果。

其他回答

您可以使用append(添加到父级的最后一个位置)或prepend(添加到其父级的第一个位置):

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

或者,可以使用不同答案中提到的.html()或.add()。

我希望这对代码有帮助。:)(我使用)

function generateParameterForm(fieldName, promptText, valueType) {
    //<div class="form-group">
    //<label for="yyy" class="control-label">XXX</label>
    //<input type="text" class="form-control" id="yyy" name="yyy"/>
    //</div>

    // Add new div tag
    var form = $("<div/>").addClass("form-group");

    // Add label for prompt text
    var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText);

    // Add text field
    var input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName);

    // lbl and inp => form
    $(form).append(label).append(input);

    return $(form);
}

如果您使用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)混合在一起,这通常是一个坏主意。

可以使用.jquery()方法创建单独的标记。并使用.append()方法创建子标记。由于jQuery支持链接,您还可以通过两种方式应用CSS。要么在类中指定它,要么只调用.attr():

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

首先,我将一个列表标记附加到div标记并将JSON数据插入其中。接下来,我将创建一个列表的子标记,并提供一些属性。我已经将值赋给了一个变量,这样我就可以很容易地附加它。

div = $("<div>").html("Loading......");
$("body").prepend(div);