Question

我有以下jQuery，这些jQuery构建嵌套的DOM元素并将其附加到当前DOM中。但是结果是元素没有完全嵌套，并且输出在视觉上有些偏离。

const urlHash = "example";
   				$("#myBookmarks").append(
				$('<div/>', {'class': 'bookmark list-group-item col-lg-3 col-md-4 col-sm-6 col-xs-12 clearfix','draggable': 'true'}).append(
					$('<div/>', {'class': ''}).append(
						$('<div/>', {'class': 'col-xs-9 col-sm-9 col-md-7', 'id': urlHash}).append(
					$('<a/>', {'href': linkURL, 'id': urlHash, 'draggable': 'false'}).append(
						t))).append(
					$('<div/>', {'class': 'text-right col-xs-3 col-sm-3 col-md-5'}).append(
						$('<a/>', {'class': 'btn btn-default glyphicon glyphicon-pencil edit'})).append(
						$('<button/>', {'class': 'btn btn-danger glyphicon glyphicon-remove delete'}))
					)
				)
			)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myBookmarks"></div>

预期结果：

<div class="bookmark list-group-item col-lg-3 col-md-4 col-sm-6 col-xs-12 clearfix" draggable="true">
    <div class="">
        <div class="col-xs-9 col-sm-9 col-md-7">
            <a href="https://amazon.com" id="-7946160306639565623" draggable="false">Amazon</a>
        </div>
        <div class="text-right col-xs-3 col-sm-3 col-md-5">
            <a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="#" draggable="false"></a>
            <button class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
        </div>
    </div>
</div>

dom元素未正确嵌套的实际结果，例如：

<div class="">
    <div class="col-xs-9 col-sm-9 col-md-7" id="[object HTMLInputElement]"><a href="https://amazon.com" id="55555"
            draggable="false">Amazon</a></div>
    <div class="text-right col-xs-3 col-sm-3 col-md-5"><a
            class="btn btn-default glyphicon glyphicon-pencil edit"></a><button
            class="btn btn-danger glyphicon glyphicon-remove delete"></button></div>
</div>

Answer 1

我会这样做，而不是很长的附加链。

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;
}

但是如果您绝对需要原始的长附加链解决方案。这是一个fiddle，用于创建所需的HTML。

为什么此代码未输出预期结果？

1 个答案: