Динамически добавлять текст к тому же идентификатору

Question

Попытка добавить текст динамически к тому же самому диапазону. Сгенерировали индекс для идентификатора, чтобы на основе индекса было предложено добавить текст.

Это то, что я пробовал. Ожидаемый результат: мне нужно создать еще один диапазон с одним и тем же идентификатором, но с другим индексом и добавить значения массива в диапазон с индексами.

Ожидаемые результаты Пример:

<span id="test-0">test</span> 
<span id="test-1">Demo</span> 

HTML:

<span id="test-{{$index}}"></span> 

JS:

var arr = [{"Name":"test"},{"Name":"Demo"}]; 
for(var i=0; i<arr.length;i++){ 
    txt = arr[i].Name; 
    $('#test-'+i).text(txt); 
} 

Пытались Демонстрация: Demo Link

Answer 1

Попробуйте это:

$('#test-'+i).text(txt); 

Answer 2

Попробуйте это: Вы можете иметь div добавить span, который будет иметь динамический идентификатор и текст из массива.

HTML-

<div id="test"></div> 

JavaScript: -

var arr = [{"Name":"test"},{"Name":"Demo"}]; 
var $text = $('#test'); 
for(var i=0; i<arr.length;i++){ 
    $text.append('<span id="test-'+i+'">'+arr[i].Name+'</span>'); 
} 

JSFiddle DEMO

Answer 3

Присвоить значение функции text()

$('#test-'+i).text(); 

к

$('#test-'+i).text(txt); 

Answer 4

Вы можете использовать строковый построитель, такие как:

var arr = [{ "Name": "test" }, { "Name": "Demo" }]; 
for (var i = 0; i < arr.length; i++) { 
    txt = arr[i].Name; 
    document.write("<span id=test-" + i + ">" + txt + "</span>"); 
} 

Answer 5

скрипку вы дали неправильно. который был отредактирован следующим образом.

check fiddle here

var arr = [{"Name":"test"},{"Name":"Demo"}]; 
    for(var i=0; i<arr.length;i++){ 
    //append existing text to new value from array 
    var txt = $('#test'+i).text() + arr[i].Name; 
    $('#test'+i).text(txt); 
    } 

Answer 6

Если вы действительно хотите использовать угловой, вы будете обо всех неправильно это. Угловое не очень хорошо работает с элементами html, добавленными в другое место, их нужно скомпилировать сначала, так что угловые могут связываться с ними. В этом случае вы можете использовать ng-repeat привязать список к серии пролетов:

<span ng-repeat="item in [100, 200, 300, 400]" id="test-{{$index}}"> 
    Index is {{$index}}<br/> 
</span> 

Вы также должны включать в себя угловым в вашей скрипке и есть элемент с ng-app тегом (fiddle). С помощью углового вы также должны иметь именованный контроллер и установить свойство в области для вашего массива, но это выходит за рамки, если этот вопрос.