jQuery document.createElementと同等ですか？

私はいくつかの古いJavaScriptコードをリファクタリングしており、多くのDOM操作が行われています。

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

jQueryを使用してこれを行うより良い方法があるかどうか知りたいのですが。私は実験してきました：

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

しかし、これがもっと良いかどうかはわかりません。

これが「1」行の例です。

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

更新：まだかなりのトラフィックを獲得しているため、この投稿を更新すると思いました。以下のコメントでに関するいくつかの議論があります$("<div>")対$("<div></div>")対$(document.createElement('div'))で新しい要素を作成する方法、およびとして「最高」。

私は小さなベンチマークをまとめました、そしてここに上記のオプションを100,000回繰り返した結果のおおよその結果があります：

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

大きな驚きでdocument.createElementはありませんが、最速の方法です。もちろん、コードベース全体のリファクタリングを開始する前に、ここで説明している（jQueryの古いバージョンを除くすべての）違いは、1,000要素あたり約3ミリ秒に相当することに注意してください。

アップデート2

以下のために更新jQueryの1.7.2と上のベンチマーク入れJSBen.chおそらく、もう少し科学的な私の原始的なベンチマークよりもあるが、それに加えて、今、クラウドソーシングすることができます！

http://jsben.ch/#/ARUtz

jQueryコンストラクターに追加する要素のHTMLを指定するだけで$()、新しく作成されたHTMLからjQueryオブジェクトが返され、jQueryのappend()メソッドを使用してDOMに追加するのに適しています。

例えば：

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

その後、必要に応じて、このテーブルをプログラムで入力できます。

これは、あなたが使用するよりもより簡潔な見つけるかもしれないクラス名や他の属性を含むあなたが好きな任意のHTML、指定する機能与えcreateElement、その後のような属性の設定cellSpacingやclassNameJSを経由し。

新しいDOM要素の作成は、jQuery()メソッドのコア機能です。以下を参照してください。

• http://api.jquery.com/jQuery/#creating-new-elements
• 特にhttp://api.jquery.com/jQuery/#example-1-1

私はそのようにしています：

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

以降jQuery1.8、を使用$.parseHTML()して要素を作成することをお勧めします。

2つの利点があります。

1.のような古い方法を使用する場合$(string)、jQueryは文字列を調べて、htmlタグを選択するか、新しい要素を作成することを確認します。を使用$.parseHTML()することで、新しい要素を明示的に作成することをjQueryに通知するため、パフォーマンスが少し向上する可能性があります。

2.はるかに重要なことは、古い方法を使用すると、クロスサイト攻撃（詳細）に苦しむ可能性があることです。あなたが次のようなものを持っている場合：

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

悪者は<script src="xss-attach.js"></script>あなたをからかうために入力することができます。幸い、$.parseHTML()この恥ずかしさを避けてください。

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 []

ただし、はhtml要素でaあり、jQueryオブジェクトであることに注意してくださいb。

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

更新

jQueryの最新バージョンでは、次のメソッドは2番目のオブジェクトで渡されるプロパティを割り当てません

前の答え

とdocument.createElement('div')一緒に使用するjQuery方が速いと感じています：

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

これは非常に古い質問ですが、最近の情報で更新した方がいいと思いました。

jQuery 1.8以降、jQuery.parseHTML（）関数があり、現在、要素を作成するための推奨方法です。また、を介したHTMLの解析にはいくつかの問題があります。$('(html code goes here)')たとえば、jQueryの公式Webサイトでは、リリースノートの1つで次のように言及しています。

緩和されたHTML解析：$（htmlString）のタグの前に、スペースや改行を追加できます。外部ソースから取得したHTMLを解析する場合は$ .parseHTML（）を使用することを強くお勧めします。将来、HTML解析にさらに変更を加える可能性があります。

実際の質問に関連するために、例を次のように翻訳できます。

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

残念ながら$()、だけを使用するよりも便利ではありませんが、たとえば、スクリプトタグを除外するように選択できます（onclickただし、インラインスクリプトはそのままになります）。

> $.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>​]

また、ここでは、新しい回答に合わせて調整された上位の回答のベンチマークを示します。

JSbinリンク

jQuery 1.9.1

  $ .parseHTML：88ミリ秒
  $（$。parseHTML）：240ミリ秒
  <div> </ div>：138ミリ秒
  <div>：143ミリ秒
  createElement：64ms

それは次のようになりますparseHTMLはるかに近くにあるcreateElementよりも$()、しかし、すべてのブーストが新しいjQueryオブジェクトに結果をラップした後に消えました

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

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

jQueryでDIV要素を作成する最も簡単な方法です。

そのための小さなjQueryプラグインを作成しました：https : //github.com/ern0/jquery.create

それはあなたの構文に従います：

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

DOMノードIDは2番目のパラメーターとして指定できます。

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

本気ですか？いいえ。ただし、この構文は$（ "<div> </ div>"）よりも優れており、その金額に対して非常に優れた値です。

私は新しいjQueryユーザーで、DOMAssistantから切り替えます。これには、同様の機能があります。http：//www.domassistant.com/documentation/DOMAssistantContent-module.php

私のプラグインはよりシンプルです、メソッドをチェーンすることでattrsとcontentを追加するほうが良いと思います：

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

また、これは単純なjQueryプラグイン（100番目）の良い例です。

それはすべてかなり簡単です！ここにいくつかの簡単な例があります...

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を使用して要素要素を作成する方法の例と、コンテンツ、クラス、または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には、createElementに相当するものがありません。実際、jQueryの作業の大部分は、純粋なDOM操作よりもinnerHTMLを使用して内部的に行われます。Adamが上で述べたように、これは同様の結果を達成する方法です。

また、などのinnerHTMLプロパティを超えるDOMのメイク使用することを利用可能なプラグインがありappendDOM、DOMECとFlyDOMはちょうど少数を示すために。パフォーマンスに関しては、ネイティブjqueryが最もパフォーマンスが高い（主にinnerHTMLを使用しているため）