如何在jquery中的span标记中附加span标记?

时间:2016-08-24 14:12:13

标签: javascript jquery html css

我在jquery中有以下代码,我试图在父span标记下添加一个子代:

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类下,我试图使用append动态生成html并且我失败了。 当我尝试在 branchRecordSpan 下追加时,它会抛出一个错误,因为它不是一个函数。我无法为“multiseleccontainer”span class创建子项。

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

2 个答案:

答案 0 :(得分:1)

分阶段进行。

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

someparent.append(x);

或者直接这样做:

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

第二种选择通常更有效。每当你向DOM .append()做一些事情时,就会有大量的后台工作来解析/修改/重新渲染/等等...通常最好将html构建为字符串,然后将其插入到DOM中大块,而不是一系列较小的块。

答案 1 :(得分:1)

你在这里忘记了一个美元符号:

branchRecordSpan = ("<span class='multiselectContainer'></span>");