如何在jQuery中创建div元素?


当前回答

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

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

其他回答

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

从技术上讲,$(“<div></div>”)将“创建”一个div元素(或者更具体地说是一个div DOM元素),但不会将其添加到HTML文档中。然后,您需要将其与其他答案结合使用,以实际使用它做任何有用的事情(例如使用append()方法等)。

操纵文档为您提供了关于如何添加新元素的各种选项。

创建内存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的答案类似,但我找不到适当处理财产对象声明中方法使用的示例,所以就这样。

可以使用.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,这就足够了:

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

or

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

它给出了相同的结果。