jQuery document.createElement equivalente?

Estou refatorando algum código JavaScript antigo e há muita manipulação de DOM acontecendo.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

Gostaria de saber se existe uma maneira melhor de fazer isso usando o jQuery. Eu tenho experimentado com:

var odv = $.create("div");
$.append(odv);
// And many more

Mas não tenho certeza se isso é melhor.

Aqui está o seu exemplo na linha "um".

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

Atualização : pensei em atualizar este post, pois ele ainda recebe bastante tráfego. Nos comentários abaixo, há alguma discussão sobre $("<div>")vs $("<div></div>")vs $(document.createElement('div'))como uma maneira de criar novos elementos, e qual é "melhor".

Eu montei uma pequena referência e aqui estão aproximadamente os resultados de repetir as opções acima 100.000 vezes:

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

Eu acho que não é uma grande surpresa, mas document.createElementé o método mais rápido. Obviamente, antes de começar a refatorar toda a sua base de código, lembre-se de que as diferenças de que estamos falando aqui (em todas as versões arcaicas do jQuery) equivalem a cerca de 3 milissegundos a cada mil elementos .

Atualização 2

Atualizado para o jQuery 1.7.2 e colocando o benchmark no JSBen.chqual provavelmente é um pouco mais científico do que meus benchmarks primitivos, além disso, ele pode ser disponibilizado agora!

http://jsben.ch/#/ARUtz

O simples fornecimento do HTML dos elementos que você deseja adicionar a um construtor jQuery $()retornará um objeto jQuery do HTML recém-criado, adequado para ser anexado ao DOM usando o append()método jQuery .

Por exemplo:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

Você pode preencher essa tabela programaticamente, se desejar.

Isso permite que você especifique qualquer HTML arbitrário que desejar, incluindo nomes de classe ou outros atributos, que você pode achar mais conciso do que usar createElemente, em seguida, definir atributos como cellSpacinge classNamevia JS.

Criar novos elementos DOM é um recurso principal do jQuery()método, consulte:

• http://api.jquery.com/jQuery/#creating-new-elements
• e, em particular, http://api.jquery.com/jQuery/#example-1-1

Eu estou fazendo assim:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

já que jQuery1.8usar $.parseHTML()para criar elementos é uma escolha melhor.

existem dois benefícios:

1.se você usar da maneira antiga, que pode ser algo como $(string), o jQuery examinará a string para garantir que você deseja selecionar uma tag html ou criar um novo elemento. Ao usar $.parseHTML(), você diz ao jQuery que deseja criar um novo elemento explicitamente, para que o desempenho possa ser um pouco melhor.

2.Muito mais importante é que você pode sofrer ataques entre sites ( mais informações ) se você usar o modo antigo. se você tiver algo como:

    var userInput = window.prompt("please enter selector");
    $(userInput).hide();

um bandido pode entrar <script src="xss-attach.js"></script>para provocar você. felizmente, $.parseHTML()evite esse embaraço para você:

var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

No entanto, observe que aé um objeto jQuery enquanto bé um elemento html:

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]

ATUALIZAR

Desde as versões mais recentes do jQuery, o método a seguir não atribui propriedades passadas no segundo objeto

Resposta anterior

Eu sinto que usar document.createElement('div')junto com jQueryé mais rápido:

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

Embora essa seja uma pergunta muito antiga, pensei que seria bom atualizá-la com informações recentes;

Desde o jQuery 1.8, existe uma função jQuery.parseHTML () que agora é a maneira preferida de criar elementos. Além disso, há alguns problemas na análise de HTML por $('(html code goes here)')exemplo, o site oficial do jQuery menciona o seguinte em uma de suas notas de versão :

Análise de HTML relaxada: Você pode novamente ter espaços à esquerda ou novas linhas antes das tags em $ (htmlString). Ainda recomendamos enfaticamente que você use $ .parseHTML () ao analisar o HTML obtido de fontes externas e poderá fazer novas alterações na análise de HTML no futuro.

Para se relacionar com a pergunta real, o exemplo fornecido pode ser traduzido para:

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

que, infelizmente, é menos conveniente do que usar apenas $(), mas oferece mais controle; por exemplo, você pode optar por excluir as tags de script (isso deixará os scripts embutidos como se onclickfossem):

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

Além disso, aqui está uma referência da resposta principal ajustada à nova realidade:

Link JSbin

jQuery 1.9.1

  $ .parseHTML: 88ms
  $ ($. parseHTML): 240ms
  <div> </div>: 138ms
  <div>: 143ms
  createElement: 64ms

Parece que parseHTMLestá muito mais perto do createElementque $(), mas todo o aumento se foi depois de agrupar os resultados em um novo objeto jQuery

var mydiv = $('<div />') // also works

var div = $('<div/>');
div.append('Hello World!');

É a maneira mais curta / fácil de criar um elemento DIV no jQuery.

Acabei de criar um pequeno plugin jQuery para isso: https://github.com/ern0/jquery.create

Segue sua sintaxe:

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

O ID do nó DOM pode ser especificado como segundo parâmetro:

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

Isto é sério? Não. Mas essa sintaxe é melhor que $ ("<div> </div>") e é um valor muito bom para esse dinheiro.

Sou um novo usuário do jQuery, alternando do DOMAssistant, que possui uma função semelhante: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Meu plugin é mais simples, acho que attrs e o conteúdo é melhor adicionar por meio de métodos de encadeamento:

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

Além disso, é um bom exemplo para um simples plugin do jQuery (o 100º).

É tudo bem direto! Heres alguns exemplos rápidos ...

var $example = $( XMLDocRoot );

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

var $example.find('parent > child').append( $element );

Como não foi mencionado nas respostas anteriores, estou adicionando um exemplo prático de como criar elementos com o jQuery mais recente, também com atributos adicionais como conteúdo, classe ou retorno de chamada onclick:

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

jQuery pronto para uso não tem o equivalente a um createElement. De fato, a maioria do trabalho do jQuery é feita internamente usando innerHTML em vez de pura manipulação de DOM. Como Adam mencionou acima, é assim que você pode obter resultados semelhantes.

Também existem plugins disponíveis que fazem uso do DOM sobre innerHTML, como appendDOM , DOMEC e FlyDOM , entre outros . Em termos de desempenho, o jquery nativo ainda é o de melhor desempenho (principalmente porque usa o innerHTML)