web-dev-qa-db-ja.com

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

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

javascriptjqueryhtmldomdhtml
1190
Rob Stevenson-Leggett

これが "1"行の例です。

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

更新：まだかなりのトラフィックがあるので、この投稿を更新したいと思いました。以下のコメントでは、新しい要素を作成する方法としての$("<div>") vs $("<div></div>") vs $(document.createElement('div'))についての議論があります。 ".

小さなベンチマーク をまとめると、上記のオプションを10万回繰り返した結果がおおよそこれになります。

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の古風なバージョンを除くすべて）は、さらに約3ミリ秒千要素あたり）に相当します。

更新2

JQuery 1.7.2用に更新され、ベンチマークをJSBen.chに置きました。これはおそらく私のプリミティブなベンチマークよりも少し科学的なものですが、今ではクラウドソーシングも可能です！

http://jsben.ch/#/ARUtz

1247
nickf

JQueryコンストラクタ$()に追加したい要素のHTMLを単に供給すると、jQueryのappend()メソッドを使ってDOMに追加されるのに適した、新しく構築されたHTMLからjQueryオブジェクトを返します。

例えば：

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

必要に応じて、このテーブルにプログラムでデータを追加することもできます。

これにより、createElementを使用してからJSを介してcellSpacingやclassNameのような属性を設定するよりも簡潔になるかもしれませんが、クラス名やその他の属性を含め、好きなHTMLを指定できます。

129
Adam Bellaire

新しいDOM要素を作成することはjQuery()メソッドの中心的な機能です。

67
abernier

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

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

jQuery1.8以降、要素を作成するために $.parseHTML() を使用するのがより良い選択です。

2つの利点があります。

1. $(string)のような古い方法を使用している場合、jQueryは文字列を調べて、HTMLタグを選択するか新しい要素を作成するかを確認します。 $.parseHTML()を使用することによって、あなたはjQueryに新しい要素を明示的に作成したいと伝えます、それでパフォーマンスはもう少し良くなるかもしれません。

2.もっともっと重要なことは、あなたが古い方法を使うなら、あなたがクロスサイト攻撃に苦しむかもしれないということです（ more info ）。次のようなものがあれば：

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

ただし、aはjQueryオブジェクトで、bはhtml要素です。

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

_アップデート_

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

前回の回答

document.createElement('div')をjQueryと一緒に使用するほうが速いと思います。

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

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

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

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

実際の質問に関連して、提供された例は次のように翻訳されます。

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

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

> $.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 Link

jQuery 1.9.1 

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

parseHTMLname__は$()よりcreateElementname__に非常に近いように見えますが、結果は新しいjQueryオブジェクトにラップされた後はすべて強化されました。

28
siergiej
var mydiv = $('<div />') // also works
11
Shimon Doodkin
var div = $('<div/>');
div.append('Hello World!');

JQueryでDIV要素を作成するための最も簡単な方法です。

7
AcidicChip

私はちょうどそのために小さな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番目のもの）の良い例です。

5
ern0

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

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

前回の回答では触れなかったので、最新のjQueryを使って要素要素を作成する方法の実用的な例を追加します。また、content、class、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>
0
Vladislav Ladicky