javascript - jQuery document.createElement equivalente?



6 Answers

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

Por exemplo:

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

Você poderia, então, preencher essa tabela programaticamente, se quisesse.

Isso permite que você especifique qualquer HTML arbitrário de que você goste, incluindo nomes de classes ou outros atributos, que você pode achar mais conciso do que usando createElement e, em seguida, configurando atributos como cellSpacing e className via JS.

javascript jquery html dom dhtml

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);

Eu 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.




desde jQuery1.8 , usando jQuery.parseHTML para criar elementos é uma escolha melhor.

Existem dois benefícios:

Se você usar o modo antigo, que pode ser algo como $(string) , o jQuery examinará a string para ter certeza de que deseja selecionar uma tag html ou criar um novo elemento. Usando $.parseHTML() , você diz ao jQuery que deseja criar um novo elemento explicitamente, para que o desempenho seja um pouco melhor.

2. coisa muito mais importante é que você pode sofrer de ataque cross-site ( mais informações ) se você usar o caminho antigo. se você tem algo como:

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

um cara mau pode inserir <script src="xss-attach.js"></script> para provocar você. Felizmente, $.parseHTML() evite esse constrangimento 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

A partir das 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 o document.createElement('div') junto com o jQuery é mais rápido:

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



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



Tudo é bem direto! Aqui está 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 );



jQuery fora da caixa não tem o equivalente de um createElement. De fato, a maioria do trabalho do jQuery é feito internamente usando innerHTML sobre manipulação pura de DOM. Como Adam mencionou acima, é assim que você pode alcançar resultados semelhantes.

Há também plugins disponíveis que fazem uso do DOM sobre innerHTML como appendDOM , DOMEC e FlyDOM só para citar alguns. Em termos de desempenho, a jquery nativa ainda é a que apresenta melhor desempenho (principalmente porque usa innerHTML)




Related