web-dev-qa-db-ja.com

JQueryでdiv要素を作成する

jQuery にdiv要素を作成する方法を教えてください。

javascriptjqueryhtmlappendjquery-append
1444
useranon

append（親の最後の位置に追加する）またはprepend（親の最初の位置に追加する）を使用できます。

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

あるいは、 別の回答 で説明されているように、.html()または.add()を使用することもできます。

1002
cm2

JQuery 1.4では、次のように自己閉鎖型要素に属性を渡すことができます。

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

これはDocsにあります。

例はjQuery 1.4で見つけることができます。リリース：知っておくべき15の新機能。

1933
ian

技術的には$('<div></div>')はdiv要素（より具体的にはDIV DOM要素）を作成しますが、それをあなたのHTML文書に追加することはしません。それを他の答えと組み合わせて使うことで実際に役立つことをする必要があります（append()メソッドの使用など）。

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

227
samjudson
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();
});
188
celoron
div = $("<div>").html("Loading......");
$("body").prepend(div);
78
Ish
$("<div/>").appendTo("div#main");

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

62
Caius

Divを作成する簡単な方法は

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

これで、カスタムdivを他のdivに追加できます。

56
maxspan

これらすべてが私のために働きました、

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>
55
Hoque
$("<div/>").attr('id','new').appendTo('body');

これにより、IDが "new"の新しいdivが本文に作成されます。

36
Ajay
document.createElement('div');
25
eomeroff

これはjQueryを使ってdivを作成するための別のテクニックです。

要素クロージング

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>
18
Steven Moseley

インメモリ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>

Ianの答えに似ていますが、プロパティオブジェクト宣言でメソッドwithinの使用に適切に対処する例が見つかりませんでした。

15
Roko C. Buljan

hTMLタグを作成したい場合は、これを試すことができます。

var selectBody = $('body');
var div = $('<div>');
var h1  = $('<h1>');
var p   = $('<p>');

あなたがflayに何か要素を追加したいなら、あなたはこれを試すことができます

selectBody.append(div);
9
MEAbid
<div id="foo"></div>

$('#foo').html('<div></div>');
8
egaga

代わりにappend（）を使うには、異なる構文を持つappendTo()を使うこともできます。

$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");
6
davidman77

Jquery> 1.4を使っているなら、 Ianの答え を使ってください。そうでなければ、私はこの方法を使用します：

これは celoronの答え と非常によく似ていますが、Jquery表記法の代わりにdocument.createElementを使用した理由はわかりません。

$("body").append(function(){
        return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
            .attr("id","myDivId")
            .addClass("myDivClass")
            .css("border", "solid")                 
            .append($("<p/>").html("I think, therefore I am."))
            .append($("<p/>").html("The die is cast."))
});

//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

また、コールバック関数と一緒にappend()を使用する方が読みやすいと思います。なぜなら、すぐに何かが本体に追加されることになるからです。しかし、コードやテキストを書くときにいつもそうであるように、それは好みの問題です。

一般に、これは主にスパゲッティコードであるため、JQueryコードではできるだけ少ないHTMLを使用してください。 HTML-Stringにはタイプミスが簡単に含まれる可能性があるため、エラーが発生しやすく保守が困難です。また、マークアップ言語（HTML）とプログラミング言語（Javascript/Jquery）が混在していますが、これは通常悪い考えです。

6
nst1nctz

.jquery()メソッドを使って別々のタグを作成することができます。そして.append()メソッドを使って子タグを作成します。 jQueryは連鎖をサポートしているので、CSSを2つの方法で適用することもできます。クラスで指定するか、単に.attr()を呼び出します。

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

まず、divタグにlistタグを追加して、そこにJSONデータを挿入します。次に、属性を指定してlistの子タグを作成します。値を変数に代入したので、追加しやすくなります。

4
Shruthi Acharya

これがdivを追加する最良の方法だと思います。

テストdivをID div_idのdiv要素に追加するには、次のようにします。

$("#div_id").append("div name along with id will come here, for example, test");

追加したtest divに _ html _ を追加します。

$("#test").append("Your HTML");
2
Atul

それが単なる空のdivであれば、これで十分です。

$("#foo").append("<div>")

または

$("#foo").append("<div/>")

同じ結果になります。

1
Vennsoh

これがコードに役立つことを願っています。 ：） （私が使う）

function generateParameterForm(fieldName, promptText, valueType) {
    //<div class="form-group">
    //<label for="yyy" class="control-label">XXX</label>
    //<input type="text" class="form-control" id="yyy" name="yyy"/>
    //</div>

    // Add new div tag
    var form = $("<div/>").addClass("form-group");

    // Add label for Prompt text
    var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText);

    // Add text field
    var input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName);

    // lbl and inp => form
    $(form).append(label).append(input);

    return $(form);
}
1
Cagdas

$(HTMLelement)はそれを成功させることができます。 epmty divが必要な場合は$('<div></div>');として使用してください。他の要素も同じ方法で設定できます。作成後に内部HTMLを変更したい場合はhtml()メソッドを使用できます。あなたが使用できる文字列としてouterHTMLを取得するためには、このようになります：

var element = $('<div/>');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>');
var outerHTML = element[0].outerHTML;
1
Kamuran Sönecek

.add()を使用して新しいjQueryobjectを作成し、ターゲットの要素に追加することができます。次にchainingを使って先に進みます。

例えば jQueryApi ：の場合

$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
 div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
0
Tushar