javascript - 将网页上的 [object HTMLElement] 渲染为元素

Question

这可能是一个简单的答案，但由于某种原因，当我执行以下代码时

$(value).closest('a').find('i.glyphicon').removeClass('glyphicon-star-empty').addClass('glyphicon-star');

console.log(navigationButtonIcon);

// Append favourite item to favourites list
$("#favouritesList").append("<li><a id=" + favouriteLinkID + ">"+ navigationButtonIcon + favouriteValue + "</span><i class='glyphicon glyphicon-minus pull-right removeFavourite'></i></a></li>");

它在控制台日志中显示:

<i class=​"fa fa-dashboard fa-fw selectNavigationBTNIcon">​::before​</i>​

当我尝试将其显示为页面上的元素时，会显示此内容:

[object HTMLElement]

我做错了什么，它没有将 [object HTMLElement] 显示为实际的代码行？

Answer 1

您将元素对象添加为字符串，该字符串会自动将其转换为 [object HTMLElement]。您需要将其添加为作为元素或作为 HTML 字符串。

作为 HTML 字符串(使用 DOM .outerHTML 获取):

$("#favouritesList").append("<li><a id=" + favouriteLinkID + ">"+ navigationButtonIcon.outerHTML + favouriteValue + "</span><i class='glyphicon glyphicon-minus pull-right removeFavourite'></i></a></li>");

作为元素(使用 jQuery .prepend()):

$("#favouritesList").append("<li><a id=" + favouriteLinkID + ">"+ favouriteValue + "</span><i class='glyphicon glyphicon-minus pull-right removeFavourite'></i></a></li>").find('#'+favouriteLinkID).prepend(navigationButtonIcon);