Как добавить HTML-теги в пустой документ с помощью JQuery?
У меня есть функция, которая возвращает список элементов HTML, которые нужно добавить в другой тег. Эта функция должна вызываться следующим образом:
$('#somewhere').append(getElements())
Чтобы проверить выполнимость, я написал это:
var el = $()
for (u in ['foo', 'bar']) {
el.append($('<li>').addClass(u).text(u + 'Text'))
}
$('<ul>').append(el).html()
В конце концов я ничего не получаю в <ul>. Почему? В чем моя ошибка? Я подозреваю, что $() не работает должным образом, потому что, если я использую var el = $('<div>'), он работает.
Примечание
Я мог бы использовать:
getElementsInto('#somewhere')
Но я бы предпочел:
$('#somewhere').append(getElements())
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
append добавляет указанные элементы к каждому элементу набора jQuery, который вы его вызываете. $() - это пустой набор jQuery, поэтому append на нем не работает. Нет элементов для добавления. (Также обратите внимание, что вы используете неправильный стиль петли для цикла по массиву; в вашем цикле u будет "0", а затем "1".) Кроме того, вызов .html() без использования возвращаемого значения - это не операция.
add создаст новый объект jQuery с дополнениями:
var elements = $();
['foo', 'bar'].forEach(function(u) {
elements = elements.add($('<li>').addClass(u).text(u + 'Text'));
});
var ul = $('<ul>').append(elements);
// then append `ul` somewhere...
ul.appendTo(document.body);<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>... но я думаю, что я бы построил элементы в массиве. В вашем случае, поскольку вашей отправной точкой является массив, вы можете использовать map:
var elements = ['foo', 'bar'].map(function(u) {
return $('<li>').addClass(u).text(u + 'Text');
});
var ul = $('<ul>').append(elements);
// then append `ul` somewhere...
ul.appendTo(document.body);<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Вы отлично умеете объяснять.