Я бы сделал это таким образом, а не длинной цепочкой добавления.
const urlHash = "example";
const linkURL = "https://amazon.com";
var emptyCLassDiv = appendAndGetElement($("#myBookmarks"), 'div', {
'class': 'bookmark list-group-item col-lg-3 col-md-4 col-sm-6 col-xs-12 clearfix',
'draggable': 'true'});
var firstDivChild = appendAndGetElement(emptyCLassDiv, 'div', {
'class': 'col-xs-9 col-sm-9 col-md-7',
'id': urlHash
});
appendAndGetElement(firstDivChild, 'a', {
'href': linkURL,'id': urlHash,'text': 'Amazon','draggable': 'false'
});
var secondDivChild = appendAndGetElement(emptyCLassDiv, 'div', {
'class': 'text-right col-xs-3 col-sm-3 col-md-5'
});
appendAndGetElement(secondDivChild, 'a', {
'class': 'btn btn-default glyphicon glyphicon-pencil edit',
'role': 'button',
'title': 'Edit Bookmark',
'href': '#',
'draggable': 'false'
});
appendAndGetElement(secondDivChild, 'button', {
'class': 'btn btn-danger glyphicon glyphicon-remove delete',
'title': 'Delete Bookmark'
});
function appendAndGetElement($parentEle, eleType, attr) {
var newEle = $('<' + eleType + '/>', attr);
$parentEle.append(newEle);
return newEle;
}
Но если вам абсолютно необходимо оригинальное решение с длинной цепочкой присоединения.Вот скрипка , которая создает необходимый HTML.