JQuery作成された要素に要素を作成する方法

Question

私はhttps://jsfiddle.net/md_bender/pj6a1akz/3/で作業しているcodeがあります。私は新しい要素を作成し、それらを既存の要素ulに追加する必要があります。要素を作成してすべてを追加することはOKです。 しかし、作成された要素に子要素を作成する方法はわかりません。私は作成する必要があります

<img src="path"/> 

私は以前のスクリプトで作成しました。これは、その

<div class="img-w js-popup"> 
    <img src="path"/> 
</div> 
<a href="delete.php">Delete</a> 

のようにする必要がありますが、私だけが行うことができますが私を助け、私の問題を解決することができるのdiv

<div class="img-w js-popup"></div> 
<img src="path"/> 
<a href="delete.php">Delete</a> 

にとして次の兄弟を作成するのですか？

Answer 1

imgをdivに追加してから、そのdivをliに追加することができます。また、あなたが追加したdiv、あなたのappend()呼び出しがli自体上にあるため、問題がある。このFiddle

$('<li/>') 
 
    .append($('<div/>', { 
 
    'class': 'img-w js-popup', 
 
    }).append($('<img/>', { 
 
    'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80' 
 
    }))) 
 
    .append($('<a/>', { 
 
    href: 'delete.php', 
 
    text: 'Delete' 
 
    })) 
 
    .appendTo('ul');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div> 
 
     <img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" /> 
 
    </div> 
 
    <a href="delete.php">Delete</a> 
 
    </li> 
 
</ul>

Answer 2

のような同じコードを書くことができません。これを試してください：あなたがHTMLを作成する最も詳細な方法を使用している、と述べたことで

var $div = $('<div/>', { 
 
    'class': 'img-w js-popup' 
 
}); 
 
$('<img/>', { 
 
    'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80' 
 
}).appendTo($div) 
 
\t 
 
$('<li/>').append($div).append($('<a/>', { 
 
    href: 'delete.php', 
 
    text: 'Delete' 
 
})).appendTo('ul');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div> 
 
     <img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" /> 
 
    </div> 
 
    <a href="delete.php">Delete</a> 
 
    </li> 
 
</ul>

を。すべての属性をハードコーディングしているので、簡単な文字列を提供するだけで、あるいは前のliを複製して追加するだけで、単純化することができます。

Answer 3

単一のDOM（LI、DIV、IMG）静的な文字列を作成し、ちょうどそのよう、リストに全体を追加するために、その簡単に（バックスラッシュについて覚え）必要がない場合は、次のすべてがかかっ

$('ul').append("<li><div><img src=\"//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80\" alt=\"\"/></div><a href=\"delete.php\">Delete</a></li>"); 

Answer 4

$('<li/>') 
    .append($('<div/>', { 
     'class': 'img-w js-popup', 
    })) 
    .append($('<div/>', { 
     'id': 'idOFDiv' 
    })) 
    .append($('<a/>', { 
     href: 'delete.php', 
    text: 'Delete' 
    })) 
    .appendTo('ul'); 

$("#idOFDiv").append($('<img/>', { 
     'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80' 
    }));