javascript - AngularJS - add HTML element to dom in directive -

i have angularjs directive in add <div class="perc"></div>

from happens?

link: function (scope, elem, attrs) {             console.log('scope', scope, elem, attrs);                 var t = elem[0];                 var dataperc = attrs.perc,                     barperc = math.round(dataperc * 5.56),                     bar = elem.children()[0],                     label = elem.children()[2];                 bar.animate({width: barperc}, dataperc * 25);                 label.append('<div class="perc"></div>');                 $compile(elem)(scope);                  function perc() {                     var length = bar.css('width'),                         perc = math.round(parseint(length) / 5.56),                         labelpos = (parseint(length) - 2);                     label.css('left', labelpos);                     t.find('.perc').text(perc + '%');                     console.log('perc',t, barperc, dataperc, length, perc, labelpos);                  }             console.log(t, label, barperc, dataperc);              perc();             setinterval(perc, 0);          } 

but angular add

<div class="label">     <span></span>     <div class="perc"></div> 

but need add span

given span inside label, select span , append code span.

refer code:

link: function (scope, elem, attrs) {             console.log('scope', scope, elem, attrs);                 var t = elem[0];                 var dataperc = attrs.perc,                     barperc = math.round(dataperc * 5.56),                     bar = elem.children()[0],                     label = elem.children()[2];                 bar.animate({width: barperc}, dataperc * 25);                 // change line of code.                 label.find("span").append('<div class="perc"></div>');                 $compile(elem)(scope);                  function perc() {                     var length = bar.css('width'),                         perc = math.round(parseint(length) / 5.56),                         labelpos = (parseint(length) - 2);                     label.css('left', labelpos);                     t.find('.perc').text(perc + '%');                     console.log('perc',t, barperc, dataperc, length, perc, labelpos);                  }             console.log(t, label, barperc, dataperc);              perc();             setinterval(perc, 0);          } 

since, span first level children of label, can use:

label.children("span").append('<div class="perc"></div>'); 

also, try following:

label.firstelementchild.append('<div class="perc"></div>');