jQueryでdiv要素を作成する[重複]

Question

この質問にはすでに答えがあります:

• jQuery document.createElement と同等ですか? 13 件の回答

作成方法 div の要素 jQuery?

Answer 1

あなたは、またはappend（親の拳の位置に追加する）（最後の親の位置に追加する）prependを使用することができます

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

異なる回答の中で述べたようにまた、あなたが.html()や.add()を使用することができます。

Answer 2

jQueryの1.4の時点で、あなたはそうのような自己閉鎖要素に属性を渡すことができます

jQuery('<div/>', {
    id: 'some-id',
    "class": 'some-class',
    title: 'now this div has a title!'
}).appendTo('#mySelector');

ここでは、のドキュメントのの

であります

例としては、の<のhref = "http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-で見つけることができます/」のrel = "noreferrer-知っている必要があります"> jQueryの1.4リリース：15の新機能をあなたは知っている必要がありますのの

Answer 3

技術の$('<div></div>')はdiv要素（またはより具体的にDIV DOM要素）を「作成」しますが、HTMLドキュメントに追加しません。その後、（例えばappend()方法や、そのようなのようなを使用するなど）、実際にそれで便利な何かをするために他の回答と組み合わせてそれを使用する必要があります。

操作ドキュメントには、あなたに新しい要素を追加する方法のすべてのさまざまなオプションを提供します。

Answer 4

d = document.createElement('div');
$(d).addClass(classname)
    .html(text)
    .appendTo($("#myDiv")) //main div
.click(function () {
    $(this).remove();
})
    .hide()
    .slideToggle(300)
    .delay(2500)
    .slideToggle(300)
    .queue(function () {
    $(this).remove();
});

Answer 5

div = $("<div>").html("Loading......");
$("body").prepend(div);    

Answer 6

$("<div/>").appendTo("div#main");

<div id="main"></div>する空白のdivを追加します。

Answer 7

のdivを作成するための短い方法です。

var customDiv = $("<div/>");

これでカスタムdivが他のdivに追加することができます。

Answer 8

これらのすべては私のために働いた、

HTMLパートます：

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

JavaScriptコード：

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo
</script>

Answer 9

$("<div/>").attr('id','new').appendTo('body');    

これは、体内に、id "新" で新しいdiv要素を作成します。

Answer 10

document.createElement('div');

Answer 11

ここでjQueryを使ってdivを作成するための別の技術です。

の のELEMENTクローニングのの

（例えば、入力をフォーム内の回数を複製するために）あなたはjQueryのを使用してクローンを作成するページ内の既存のdivを持っていると言います。次のようにあなたはそうするでしょう。

$('#clone_button').click(function() {
  $('#clone_wrapper div:first')
  .clone()
  .append('clone')
  .appendTo($('#clone_wrapper'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clone_wrapper">
  <div>
    Div
  </div>
</div>

<button id="clone_button">Clone me!</button>

Answer 12

メモリー内のDIVを作成します。

$("<div/>");

クリックハンドラを追加し、スタイルなど - そして最後のターゲット要素セレクタへのDOMに挿入ます：

$("<div/>", {

  // PROPERTIES HERE
  
  text: "Click me",
  id: "example",
  "class": "myDiv",      // ('class' is still better in quotes)
  css: {           
    color: "red",
    fontSize: "3em",
    cursor: "pointer"
  },
  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },
  append: "<i>!!</i>",
  appendTo: "body"      // Finally, append to any selector
  
}); // << no need to do anything here as we defined the properties internally.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

イアンの答えと同様に、<サブ>が、私ははプロパティは、あなたが行くので、そこ宣言をオブジェクト内の適切に対処なし例方法の使用は、を見つかりませんでした。