The preferred way of creating a new element with jQuery

北城余情 提交于 2019-11-26 04:04:56

问题


I\'ve got 2 ways I can create a <div> using jQuery.

Either:

var div = $(\"<div></div>\");
$(\"#box\").append(div);

Or:

$(\"#box\").append(\"<div></div>\");

What are the drawbacks of using second way other than re-usability?


回答1:


The first option gives you more flexibilty:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

And of course .html('*') overrides the content while .append('*') doesn't, but I guess, this wasn't your question.

Another good practice is prefixing your jQuery variables with $:
Is there any specific reason behind using $ with variable in jQuery

Placing quotes around the "class" property name will make it more compatible with less flexible browsers.




回答2:


I personally think that it's more important for the code to be readable and editable than performant. Whichever one you find easier to look at and it should be the one you choose for above factors. You can write it as:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

And your first Method as:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

But as far as readability goes; the jQuery approach is my favorite. Follow this Helpful jQuery Tricks, Notes, and Best Practices




回答3:


Much more expressive way,

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

Reference: Docs




回答4:


According to the jQuery official documentation

To create a HTML element, $("<div/>") or $("<div></div>") is preferred.

Then you can use either appendTo, append, before, after and etc,. to insert the new element to the DOM.

PS: jQuery Version 1.11.x




回答5:


I have a new idea, using .html(content)

You can put a empty <div></div> previously at the place you want, don’t forget to set an ID for this DIV.

After that, use $("#divId").html(content) to replace the empty DIV with your new content, which is the DIV you want to append.




回答6:


I would recommend the first option, where you actually build elements using jQuery. the second approach simply sets the innerHTML property of the element to a string, which happens to be HTML, and is more error prone and less flexible.




回答7:


If #box is empty, nothing, but if it's not these do very different things. The former will add a div as the last child node of #box. The latter completely replaces the contents of #box with a single empty div, text and all.




回答8:


It is also possible to create a div element in the following way:

var my_div = document.createElement('div');

add class

my_div.classList.add('col-10');

also can perform append() and appendChild()



来源:https://stackoverflow.com/questions/10619445/the-preferred-way-of-creating-a-new-element-with-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!