Написание HTML для строки значений с использованием JavaScript и JQuery?

Question

Написание HTML для строки значений с использованием JavaScript и JQuery?

0

Я хочу, чтобы страница html отображалась как:

<div class='container'>
  <div class='domain-list0'>Hello</div>
  <div class='domain-list1'>World</div>
</div>

Вот мой html и js: Pen из Codepen.io

Вместо того, чтобы создавать первый "список доменов", а затем создавать другой для следующего, он просто перезаписывает предыдущий "список доменов". Вот почему оно показывает последнее значение строки. Кто-нибудь знает, как это исправить?

Благодарю!

Ty Strong 22 март 2014, в 06:16

Источник

Теги:

javascript

jquery

html

3 ответа

1

Попробуйте использовать appendTo в jquery

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
  $("<div class='domain-list"+i+"'></div>").html("<p>"+myStringArray[i]+"</p>").appendTo("div.container");
  //Do something
}

Sridhar Narasimhan 22 март 2014, в 02:56

1

for (var i = 0; i < arrayLength; i++) {
  $("div.container").html("<div class='domain-list'></div>");
  $(".domain-list:nth-child("+i+")").html("<p>"+myStringArray[i]+"</p>");
  //Do something
}

Arryangga Aliev Pratamaputra 22 март 2014, в 02:35

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-03-22T03-46-00.000Z

Вы используете .html(), который удаляет существующий контент и заменяет его новым контентом. Вам нужно использовать append, чтобы новый контент был добавлен после последнего дочернего элемента.

var myStringArray = ["Hello", "World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    var $el = $("<div  />", {
        'class': 'domain-list' + i,
        html: "<p>" + myStringArray[i] + "</p>"
    }).appendTo("div.container");
    // $el refer to the newl added element
}

Демо: скрипка

используйте .appendTo(), чтобы он возвращал вновь созданный элемент, который можно использовать для дальнейшей обработки