关于javascript：在jQuery中创建div元素


Creating a div element in jQuery

本问题已经有最佳答案，请猛点这里访问。

如何在jquery中创建div元素？

相关讨论

从jquery 1.4开始，可以将属性传递给自关闭元素，如下所示：

1
2
3
4
5
jQuery('', {
    id: 'some-id',
    class: 'some-class',
    title: 'now this div has a title!'
}).appendTo('#mySelector');

这是在医生那里

示例可以在jquery 1.4版本中找到：您必须知道的15个新特性。

相关讨论

您可以使用append或prepend添加到父项的最后位置：

1
2
3
$('#parent').append('hello');    
// or
$('hello').appendTo('#parent');

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

相关讨论

从技术上讲，$('')将"创建"一个div元素(或者更具体地说是一个div-dom元素)，但不会将其添加到HTML文档中。然后，您需要将它与其他答案结合起来实际使用它做任何有用的事情(例如使用append()方法或类似方法)。

操作文档提供了关于如何添加新元素的所有选项。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();
});
相关讨论

1
2
div = $("").html("Loading......");
$("body").prepend(div);
1
$("").appendTo("div#main");

将在EDOCX1[0]上附加一个空白的div

创建DIV的一个短方法是

1
var customDiv = $("");

现在，自定义DIV可以附加到任何其他DIV。

所有这些都对我有帮助，

HTML部分：

1
    This text is surrounded by a DIV tag whose id is"targetDIV".

javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//Way 1: appendTo()
<script type="text/javascript">
    $("hello stackoverflow users").appendTo("#targetDIV"); //appendTo: Append at inside bottom


//Way 2: prependTo()
<script type="text/javascript">
    $("Hello, Stack Overflow users").prependTo("#targetDIV"); //prependTo: Append at inside top


//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("Hello, Stack Overflow users"); //.html(): Clean HTML inside and append


//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("Hello, Stack Overflow users"); //Same as appendTo
1
$("").attr('id','new').appendTo('body');

这将在主体中创建ID为"new"的新DIV。

1
document.createElement('div');
相关讨论

这是另一种用jquery创建div的技术。

元素克隆

假设您的页面中已有一个要使用jquery克隆的DIV(例如，在表单中多次复制输入)。你可以这样做。

1
2
3
4
5
6
$('#clone_button').click(function() {
  $('#clone_wrapper div:first')
  .clone()
  .append('clone')
  .appendTo($('#clone_wrapper'));
});
1
2
3
4
5
6
7
8
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

 
    Div
 


<button id="clone_button">Clone me!</button>

相关讨论

创建内存DIV

1
$("");

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("", {

  // PROPERTIES HERE
 
  text:"Click me",
  id:"example",
 "class":"myDiv",      // ('class' is still better in quotes)
  css: {          
    color:"red",
    fontSize:"3em",
    cursor:"pointer"
  },
  on: {
    mouseenter: function() {
      console.log("PLEASE..."+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is:"+ this.id);
    }
  },
  append:"!!",
  appendTo:"body"      // Finally, append to any selector
 
}); // << no need to do anything here as we defined the properties internally.
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

类似于Ian的答案，但我没有发现任何示例能够正确地解决属性对象声明中方法的使用问题，因此您可以这样做。

相关讨论

如果你想创建任何HTML标签，你可以试试这个例如

1
2
3
4
5
var selectBody = $('body');
var div = $('');
var h1  = $('');
var p   = $('<p>
');

如果你想在薄片上添加任何元素，你可以试试这个。

1
selectBody.append(div);
1
$('#foo').html('');
相关讨论

或者附加()您还可以使用具有不同语法的appendTo()：

1
2
$("#foo").append("hello world");
$("hello world").appendTo("#foo");

如果您使用的是jquery>1.4，那么最好使用Ian的答案。否则，我将使用此方法：

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

1
2
3
4
5
6
7
8
9
10
11
$("body").append(function(){
        return $("").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()：

1
2
3
4
5
6
7
8
var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

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

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

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

相关讨论

我认为这是添加DIV的最佳方法：

要将test div附加到id为div_id的div元素，请执行以下操作：

1
$("#div_id").append("div name along with id will come here, for example, test");

现在将HTML附加到这个添加的测试分区：

1
$("#test").append("Your HTML");

如果它只是一个空的DIV，这就足够了：

1
$("#foo").append("")

或

1
$("#foo").append("")

结果是一样的。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function generateParameterForm(fieldName, promptText, valueType) {
    //
    //<label for="yyy" class="control-label">XXX</label>
    //<input type="text" class="form-control" id="yyy" name="yyy"/>
    //

    // Add new div tag
    var form = $("").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);
}

$(HTMLelement)可以成功。如果您想要一个epmty div，请使用它作为$('');。也可以使用相同的方法设置其他元素。如果您想在创建后更改内部HTML，可以使用html()方法。对于get outerhtml as string，您可以这样使用：

1
2
3
var element = $('');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('new HTML');
var outerHTML = element[0].outerHTML;

可以使用.add()创建新的jquery对象并添加到目标元素中。然后使用链条继续。

例如jqueryapi：

1
2
3
$("div" ).css("border","2px solid red" )
  .add("p" )
  .css("background","yellow" );
1
2
3
4
5
6
 div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

相关讨论

这个怎么样？这里，pElement指的是您希望这个div在里面的元素(作为的子元素)！：)

1
$("pElement").append("</div");

您可以轻松地在字符串属性、内容和命名中向div添加更多内容。请注意，对于属性值，需要使用正确的引号。

我刚刚为它做了一个小的jquery插件。

它遵循您的语法：

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

可以将dom节点id指定为第二个参数：

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

严重吗？不，但是这个语法比$(")好，而且它对这笔钱来说是一个很好的价值。

(答案部分复制自：jquery document.createElement equivalent？)

相关讨论