在jQuery中创建div元素

2020/09/16 12:31 · javascript ·  · 0评论

如何divjQuery中创建元素

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

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

或者,您可以使用.html().add()其他答案中提到的

从jQuery 1.4开始,您可以将属性传递给自闭元素,如下所示:

jQuery('<div/>', {
    id: 'some-id',
    "class": 'some-class',
    title: 'now this div has a title!'
}).appendTo('#mySelector');

这是在文档中

可以在jQuery 1.4 Released中找到示例:必须了解的15个新功能

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

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

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>").html("Loading......");
$("body").prepend(div);    
$("<div/>").appendTo("div#main");

会将空白div附加到 <div id="main"></div>

创建div的一种简单方法是

var customDiv = $("<div/>");

现在,可以将自定义div附加到任何其他div。

这些都为我工作

HTML部分:

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

JavaScript代码:

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

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

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

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

这将在主体中创建ID为“ new”的新div。

document.createElement('div');

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

元素克隆

假设您的页面中已有一个要使用jQuery克隆的div(例如,以表格的形式重复输入多次)。您将按照以下步骤进行操作。

$('#clone_button').click(function() {
  $('#clone_wrapper div:first')
  .clone()
  .append('clone')
  .appendTo($('#clone_wrapper'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clone_wrapper">
  <div>
    Div
  </div>
</div>

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

创建内存中的DIV

$("<div/>");

添加点击处理程序,样式等-最后将DOM插入目标元素选择器中:

$("<div/>", {

  // 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: "<i>!!</i>",
  appendTo: "body"      // Finally, append to any selector
  
}); // << no need to do anything here as we defined the properties internally.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

类似伊恩的答案,但我没有发现任何例如,妥善解决了使用方法对象的属性声明,所以你去。

只是如果您想创建任何HTML标签,您可以尝试例如

var selectBody = $('body');
var div = $('<div>');
var h1  = $('<h1>');
var p   = $('<p>');

如果您想在装饰板上添加任何元素,可以尝试一下

selectBody.append(div);
<div id="foo"></div>

$('#foo').html('<div></div>');

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

这与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)混合使用,这通常是一个不好的主意。

除了append()之外,您还可以使用appendTo()具有不同语法的语法:

$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");    

您可以使用.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附加到ID为div_id的div元素:

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

现在将HTML附加到此添加的测试div中:

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

希望对您有所帮助。:) (我用)

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

如果只是一个空的div,那就足够了:

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

要么

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

它给出相同的结果。

$(HTMLelement)可以成功。如果您想要一个epmty div,请将其用作$('<div></div>');您也可以通过相同的方法设置其他元素。如果要在创建后更改内部HTML,可以使用html()方法。对于将externalHTML作为字符串获取,可以使用如下所示:

var element = $('<div/>');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>');
var outerHTML = element[0].outerHTML;

您可以.add()用来创建新的jQuery 对象并将其添加到目标元素。然后使用链接进行下一步。

对于例如jQueryApi

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

这个怎么样?在这里,pElement指的是您要div在其中包含的元素(成为!的子元素)

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

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

我刚刚为此做了一个小的jQuery插件

它遵循您的语法:

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

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

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

严重吗 不会。但是此语法比$(“ <div> </ div>”)更好,并且对于这笔钱而言,这是非常好的价值。

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

本文地址:http://javascript.askforanswer.com/zaijqueryzhongchuangjiandivyuansu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!