Jquery document.createElement equivalent?

Practical element enhancements

Assigning multiple attributes efficiently

While working with multiple attributes, assigning them through jQuery's object syntax brings outstanding readability and manageability to your code:

// "Yes, I am a text field and I'm proud of it!"
$('<input>', {
  type: 'text',
  id: 'myInput',
  val: 'Enter your name',
  css: {
    'border-radius': '5px'
  },
  on: {
    focus: function() {
      // "Oh, the power of Red color when focused!"
      $(this).css('outline-color', '#ff0000');
    }
  }
}).appendTo('body');


In this single expression, we've created the element, styled it, inserted a default value, and even added an event listener.

Dynamic content with loops

You can construct content on-the-fly using loops. Here's an example using jQuery's .append() method to add a list of items to a ul from an array:

var dataList = ['Item 1', 'Item 2', 'Item 3'];
var newList = $('<ul>');
$.each(dataList, function(index, value) {
  // "Hi, I'm a list item. Please, don't 'ul' around!"
  newList.append($('<li>').text(value));
});
newList.appendTo('body');


Add more complex structures is a breeze thanks to the ability of jQuery to handle arbitrary HTML strings:

var complexHtml = `
  <div class="container">
    <header class="header">Header content</header>
    <section class="body">
      <p>Romans never said a good 'p' was hard to find!</p>
      ...
    </section>
    <footer class="footer">Footer content</footer>
  </div>
`;

$('body').append($(complexHtml));


Shortcuts in DOM manipulation

The joy of using jQuery is that it's often far more concise than the equivalent JavaScript. Consider a simple example of adding an ul element:

// Plain JavaScript, back to the roots!
var list = document.createElement('ul');
document.body.appendChild(list);

// jQuery, let's get to the 'ul' business in a snap!
$('<ul>').appendTo('body');


Get the speedo-meter: Benchmarking

Though generally the difference is teeny-weeny—boiling down to mere milliseconds for thousands of elements—when you're craving for maximized performance, conducting benchmarks might be an appealing concept. JSBen.ch can be your best companion in this.

Minimal impact, maximum efficiency

The fastest method, which has the least performance impact, is to use document.createElement within jQuery. Especially handy when it comes to generating a large number of elements:

var elements = [];
for (var i = 0; i < 1000; i++) {
  elements.push($(document.createElement('div')));
}
// "Let's multiply, we're a thousand DIVs strong!"


The speed difference is usually negligible, but for those with a need for speed, this technique can deliver.

Adding arbitrary HTML directly

To add arbitrary HTML, you can sneak it directly into the jQuery $() function. This approach can simplify your code:

// "New DIV on the block!"
$('#container').append($('<div class="new-div">New Content</div>'));
