как добавить в список js
Например, можно создать класс ShoppingList , который будет представлять список покупок в магазине. В этом классе можно будет хранить массив элементов списка, а также реализовывать методы для добавления новых элементов в список.
class ShoppingList constructor() this.items = []; // массив элементов списка > // метод для добавления нового элемента в список addItem(item) this.items.push(item); > > Далее, чтобы добавить новый элемент в список, нужно создать объект класса ShoppingList , а затем вызвать метод addItem , передав в него новый элемент:
// создаем новый список покупок const shoppingList = new ShoppingList(); // добавляем новый элемент в список shoppingList.addItem('молоко'); shoppingList.addItem('яица'); Таким образом, при вызове метода addItem новый элемент будет добавлен в массив items объекта shoppingList . Результат можно вывести в консоль, например:
console.log(shoppingList.items); // ["молоко", "яица"] Array.prototype.push()
Метод push() добавляет один или более элементов в конец массива и возвращает новую длину массива.
Синтаксис
arr.push(element1, . elementN)
Параметры
Элементы, добавляемые в конец массива.
Возвращаемое значение
Новое значение свойства length объекта, для которого был вызван данный метод.
Описание
Метод push присоединяет значения к массиву.
Метод push не является привязанным к типу; этот метод может быть вызван или применён к объектам, напоминающим массив. Метод опирается на свойство length для определения места вставки значений. Если свойство length не может быть преобразовано в число, будет использовать индекс 0. Сюда входит случай несуществования свойства length , в этом случае оно также будет создано.
Единственными родными массивоподобными объектами являются строки, хотя к ним он не может быть применён, поскольку строки являются неизменяемыми.
Примеры
Пример: добавление элементов в массив
Следующий код создаёт массив sports , содержащий два элемента, а затем добавляет к нему ещё два элемента. Переменная total будет содержать новую длину массива.
var sports = ["футбол", "бейсбол"]; var total = sports.push("американский футбол", "плавание"); console.log(sports); // ['футбол', 'бейсбол', 'американский футбол', 'плавание'] console.log(total); // 4
Пример: слияние двух массивов
В этом примере используется функция apply() для помещения всех элементов из второго массива в первый.
var vegetables = ["пастернак", "картошка"]; var moreVegs = ["сельдерей", "свёкла"]; // Сливает второй массив с первым // Эквивалентно вызову vegetables.push('сельдерей', 'свёкла'); Array.prototype.push.apply(vegetables, moreVegs); console.log(vegetables); // ['пастернак', 'картошка', 'сельдерей', 'свёкла']
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-array.prototype.push |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Array.prototype.pop()
- Array.prototype.shift()
- Array.prototype.unshift()
- Array.prototype.concat()
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как добавить класс выбранному элементу списка ul на чистом js
Есть список элементов (ссылок) ul li, и отдельно от списка блок. Нужно, чтоб контент, который я кликну из списка отображался в блоке Пример Есть список городов:
- Москва
- Санкт-Петербург
- Новосибирск
- Архангельск
- Нижний новгород
И отдельный блок:
Нужно чтоб в блоке отображался выбранный мною город
Отслеживать
задан 29 дек 2022 в 20:07
BogdanChyornyy BogdanChyornyy
11 3 3 бронзовых знака
Вставьте корректый HTML код. Вы указываете div , а потом на деле оказывается что там input . А лучше всего будет вставить минимальный воспроизводимый пример. Для этого нажмите кнопку Править под вопросом и в редакторе вопроса нажмите CTRL+M, вставьте там ваш код по нужным секциям, обязательно нажмите кнопку «Привести в порядок», после нажмите на «Запустить». Убедитесь, что всё отображается как вам надо и нет никаких других ошибок, кроме тех, о которых вы спрашиваете. Только после всего этого в конце нажмите на «Вставить в сообщение»
Как добавить в список js
Для создания списка используется html-элемент select. Причем с его помощью можно создавать как выпадающие списки, так и обычные с ординарным или множественным выбором. Например, стандартный список:
Атрибут size позволяет установить, сколько элементов будут отображаться одномоментно в списке. Значение size=»1″ отображает только один элемент списка, а сам список становится выпадающим. Если установить у элемента select атрибут multiple , то в списке можно выбрать сразу несколько значений.
Каждый элемент списка представлен html-элементом option, у которого есть отображаемая метка и есть значения в виде атрибута value .
В JavaScript элементу select соответствует объект HTMLSelectElement , а элементу option — объект HtmlOptionElement или просто Option .
Все элементы списка в javascript доступны через коллекцию options . А каждый объект HtmlOptionElement имеет свойства: index (индекс в коллекции options), text (отображаемый текст) и value (значение элемента). Например, получим первый элемент списка и выведем о нем через его свойства всю информацию:
Другой способ получить нужный элемент списка по индексу представляет метод item() , в который передается индекс элемента:
const firstLanguage = myForm.language.item(0); console.log("Index:", firstLanguage.index); console.log("Text:", firstLanguage.text); console.log("Value:", firstLanguage.value);
Динамическое управление списком
В javascript мы можем не только получать элементы, но и динамически управлять списком. Например, применим добавление и удаление объектов списка:
Для добавления на форме предназначены два текстовых поля (для текстовой метки и значения элемента option) и кнопка. Для удаления выделенного элемента предназначена еще одна кнопка.
За добавление в коде javascript отвечает функция addOption , в которой получаем введенные в текстовые поля значения, создаем новый объект Option и добавляем его в массив options объекта списка.
За удаление отвечает функция removeOption , в которой просто получаем индекс выделенного элемента с помощью свойства selectedIndex и в коллекции options приравниваем по этому индексу значение null.
Для добавления/удаления также в качестве альтернативы можно использовать методы элемента select:
// вместо вызова // languagesSelect.options[languagesSelect.options.length]=newOption; // использовать для добавления вызов метода add languagesSelect.add(newOption); // вместо вызова // languagesSelect.options[selectedIndex] = null; // использовать для удаления метод remove languagesSelect.remove(selectedIndex);
События элемента select. Обработка выбора в списке
Элемент select поддерживает три события: blur (потеря фокуса), focus (получение фокуса) и change (изменение выделенного элемента в списке). Рассмотрим применение события select:
Список со множественным выбором
Если у элемента установлен атрибут multiple , то список позволяет выбрать несколько элементов. В этом случае для получения всех выделенных элементов необходимо использовать свойство selectedOptions , которое представляет объект типа HTMLCollection и содержит список выбранных элементов. А каждый объект в этом списке имеет тип HTMLOptionElement . Соответственно для получения каждого из выбранных элементов нам надо перебрать эту коллекцию:
В данном случае в обработчике события change проходим по каждому выбранному элементу и для каждого элемента создаем текстовый узел, который помещаем в элемент div, который, в свою очередь, помещаем в элемент selection на веб-странице.