javascript - 如何在jquery中将一个span标签附加到另一个span标签中？

Question

我在 jquery 中有以下代码，我试图在父级跨度标签下添加一个子级:

jquery

var branchName = $(this).closest('tr').find('#adjNcmcompanyNameId').text();
var branchId = $(this).closest('tr').find('#adjNCMBranchIdForSearch').text();
var branchRecord = $(this).parents().find('#resultsection');
branchRecordSpan = ("<span class='multiselectContainer'></span>");
branchRecordSpan.append("<span class='indivSelectedText'>" + branchName + "</span>");
branchRecordSpan.append("<input class='indivSelectedValue' type='hidden' value=" + branchId + ">");
branchRecordSpan.append("<strong class='alert-pink'><i class='fa fa-chevron-left fa-lg'></i></strong>");
branchRecordSpan.append("</span>");
branchRecordSpan.append("<br/>");

我想要获取的html

<div id="resultsection">
    <span class="multiselectContainer" id=
    "c85a47e3-40c0-48e1-95f0-89dd761dbb56"><span class=
    "indivSelectedText">MY BRANCH</span> <input class="indivSelectedValue"
    type="hidden" value="183424"> <strong class="alert-warning"><i class=
    "fa fa-chevron-left fa-lg"></i> <i class="fa fa-database"></i>
    ,DATAHUB/ 8683403</strong> <a class="fa fa-times-circle labelclose"
    href="#"></a></span><br>
</div>

由于所有内容都在 multiselectContainer span 类下，因此我尝试使用追加动态生成 html，但失败了。 当我尝试在 branchRecordSpan 下追加时，它会抛出错误，因为它不是函数。我无法为“multiseleccontainer”跨度类创建子级。

如何在另一个span标签下动态创建一个span标签？请帮忙。

Answer 1

分阶段进行。

x = $('<span>parent span</span>');
x.append('<span>new child span</span>');

someparent.append(x);

或者直接执行:

x = $('<span>parent<span>child</span></span>');

第二种选择通常更有效。每次你 .append() 向 DOM 中添加一些内容时，都会有相当多的后台工作需要解析/修改/重新渲染等...通常最好将 html 构建为字符串，然后插入它以一个大块的形式进入 DOM，而不是一系列较小的 block 。