JQuery 생성 된 요소에 요소를 만드는 방법

Question

내가 작업중인 code이 있습니다. - https://jsfiddle.net/md_bender/pj6a1akz/3/. 새로운 요소를 만들고 기존 요소 ul에 추가해야합니다. 요소를 작성하고 모든 것을 추가하는 것은 괜찮습니다. 하지만 만든 된 요소에 자식 요소를 만드는 방법을 모르겠습니다. 생성해야합니다

<img src="path"/> 

div에서 이전 스크립트에서 생성했습니다. 그것은 그

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

처럼해야하지만 내가 할 수있는 날 도와 내 문제를 해결할 수 있습니다 사업부

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

에 같은 다음의 형제를 만드는 것입니다?

Answer 1

해당 div를 li에 추가하기 전에 img을 div에 추가 할 수 있습니다. 당신은 또한 당신의 append() 호출이 div 당신은 추가되지, 자체 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을 복제하고 추가하여 단순화 할 수 있습니다. 하나의 DOM의 (리, DIV, IMG)가 필요하지 않은 경우

Answer 3

는 쉽게 정적 문자열을 만들고 그 (백 슬래시에 대해 기억)처럼,리스트에 전체 추가 할 :

$('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' 
    }));