Jquery Document.Createelement Equivalent

jQuery document.createElement equivalent?

Here's your example in the "one" line.

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

Update: I thought I'd update this post since it still gets quite a bit of traffic. In the comments below there's some discussion about $("<div>") vs $("<div></div>") vs $(document.createElement('div')) as a way of creating new elements, and which is "best".

I put together a small benchmark, and here are roughly the results of repeating the above options 100,000 times:

jQuery 1.4, 1.5, 1.6

               Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms

jQuery 1.3

                Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

jQuery 1.2

                Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

I think it's no big surprise, but document.createElement is the fastest method. Of course, before you go off and start refactoring your entire codebase, remember that the differences we're talking about here (in all but the archaic versions of jQuery) equate to about an extra 3 milliseconds per thousand elements.

Update 2

Updated for jQuery 1.7.2 and put the benchmark on JSBen.ch which is probably a bit more scientific than my primitive benchmarks, plus it can be crowdsourced now!

http://jsben.ch/#/ARUtz

Equivalent of document.createElement('option') in jQuery

The equivalent of this createElement() in jQuery is to provide the entire element string to the jQuery object constructor: $('<option />'). Note that you can also set properties and call methods from the constructor as well by providing an object to the second argument. The direct translation of the logic would look like this:

keys.forEach(item => {
 $('<option />', { text: item }).appendTo('#Select');
});

However it's worth noting that this approach requires a DOM access, as well as defining a new jQuery object, for every iteration of the loop. A more performant approach is to use map() instead of forEach() to build an array of strings to be appended to the DOM, like this:

let options = keys.map(item => `<option>${item}</option>`); // optional: join('')
$('#Select').append(options);

createElement in jQuery

Just try with:

function generateInputs()
{
    var i = $('<input type="text"/>');

    for(var j=0;j<4;j++)
    {
        var c = $('<input type="text"/>');
        var r = $('<input type="radio"/>');

        $('#questions').append(c).append(r);
    }


    $('#questions').append(i);

}

In Jquery how to refer javascript's element created by document.createElement

You need to turn the native element into a jQuery object. Native elements don't recognize jQuery methods

Try

$(href1).append("<br>");

If you want to do all this with jQuery alone the code is quite simple

// create new <div> element and apply style
var href1 = $("<div>").css('float','left');
// append to id=krishna
$('#krishna').append(href1);

What is the most efficient way to create HTML elements using jQuery?

I use $(document.createElement('div')); Benchmarking shows this technique is the fastest. I speculate this is because jQuery doesn't have to identify it as an element and create the element itself.

You should really run benchmarks with different Javascript engines and weigh your audience with the results. Make a decision from there.

Creating a div element in jQuery

You can use append (to add at last position of parent) or prepend (to add at fist position of parent):

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

Alternatively, you can use the .html() or .add() as mentioned in a different answer.

An (almost) equivalent of PHP's strip_tags() without jQuery

Well, it might not be the best way of doing it but after a lot of thinking and researching I managed to get the job with a simple Regex — 'til someone shows up with a complete example of how to do it better:

const text = `<div id="text">
   <blockquote>
  <p>Lorem ipsum dolor...</p>
  <footer>
  By <a href="https://www.github.com/someuser"><strong>Some User</strong></a>
    in March, 13
  </footer>
</blockquote>
</div>`;

const VALID_TAGS = [
'b', 'strong', 'i', 'em', 's', 'a', 'img', 'blockquote', 'ul', 'li'
  ];

function stripTags( input, allowed ) {
  return input.replace( new RegExp( `\\s*<(?!\/?\\b(${allowed.join('|')})\\b)[^>]+>\\s*`, 'gmi' ), '');
}

console.log( stripTags( text, VALID_TAGS ).trim().replace(/(\r\n|\n|\r)/gm, '' ).replace( /\s{2,}/gm, ' ' ) )