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?
This question is related to
javascript
jquery
append
createelement
jquery-append
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
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.
According to the documentation for 3.4, It is preferred to use attributes with attr()
method.
$('<div></div>').attr(
{
id: 'some dynanmic|static id',
"class": 'some dynanmic|static class'
}
).click(function() {
$( "span", this ).addClass( "bar" ); // example from the docs
});
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()
Much more expressive way,
jQuery('<div/>', {
"id": 'foo',
"name": 'mainDiv',
"class": 'wrapper',
"click": function() {
jQuery(this).toggleClass("test");
}}).appendTo('selector');
Reference: Docs
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
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.
Source: Stackoverflow.com