为啥这段代码没有输出预期的结果？

Posted 2023-05-09

【中文标题】为啥这段代码没有输出预期的结果？

【英文标题】：Why is this code not outputting expected result?为什么这段代码没有输出预期的结果？

【发布时间】：2019-11-14 09:04:06

【问题描述】：

我有以下 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>

【问题讨论】：

那么问题出在哪里？你好像忘了告诉我们问题是什么。

我还没有拿出显微镜，但您的代码似乎可以创建那种结构或类似的东西...？

我在这里没有看到任何问题。除了像您在代码中为 div 提供 ID 'example' 但在您的预期代码示例中不存在的次要细节。或者代替 class='' 它只显示类。

我添加了实际输出。嵌套有点不对劲，但我已经检查了一个多小时，看看是否有什么不对劲，而且代码对我来说似乎是正确的。

试图阅读该代码让我的大脑受伤！

【参考方案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;

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