Как добавить тег span внутри другого тега span в jquery?

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, я стараюсь nerate html динамически, используя append, и я терпеть неудачу. Когда я пытаюсь добавить под 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, есть много работы фона для разбора/изменения/повторного рендеринга/etc ... Как правило, лучше всего построить html в виде строки, а затем вставить его в DOM в один большой кусок, а чем серия небольших кусков.

Answer 2

Вы забыли знак доллара здесь:

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