Учебное пособие по основам добавления и удаления элементов, а также некоторым продвинутым методам.
В этом сообщении блога мы обсудим, как программно создавать и удалять элементы с помощью JavaScript. Это очень полезный навык, который можно использовать для самых разных целей. Мы рассмотрим основы добавления и удаления элементов, а также некоторые более сложные методы.
документ.createElement()
Первый метод, который мы обсудим, — это метод createElement() . Этот метод позволяет создать элемент с указанным именем тега. Например, если вы хотите создать новый элемент h1, вы должны использовать следующий код:
Метод document.createElement() создаст элемент HTML, указанный любым именем тега, которое вы передадите.
добавить дочерний элемент ()
Создав элемент, вы можете добавить его в документ с помощью метода appendChild() . Метод appendChild() вставляет дочерний узел в конец списка дочерних элементов для указанного родительского узла. Например, следующий код добавит новый элемент заголовка в конец тела документа:
Предыдущий код добавлял новый элемент заголовка в конец тела документа с текстом «Добро пожаловать в мое портфолио».
удалять()
Если вы хотите удалить элемент из документа, вы можете использовать метод remove() . Метод remove() удаляет указанный дочерний узел элемента из документа. Например, если бы мы хотели удалить элемент заголовка, который мы создали в предыдущем разделе, мы бы использовали следующий код:
Предыдущий код удалит элемент заголовка из документа.
Случаи использования
Теперь, когда мы рассмотрели основы создания и удаления элементов, давайте обсудим некоторые практические приложения для этого.
Одним из распространенных вариантов использования программного создания элементов является динамическое создание контента на веб-странице. Например, вы можете использовать метод createElement() для создания списка элементов из массива:
Предыдущий код генерировал список с элементами «один элемент», «элемент два» и «элемент три».
Другим распространенным вариантом использования программного создания элементов является добавление прослушивателей событий. Например, вы можете использовать метод createElement() для создания кнопки, а затем добавить прослушиватель событий, который прослушивает событие щелчка:
Предыдущий код создал бы кнопку с текстом «Нажми меня!», и при нажатии кнопки появится предупреждение с сообщением «Вы нажали кнопку!».
Заключение
Программное создание и удаление элементов может быть очень мощным инструментом в вашем арсенале JavaScript. Надеюсь, вы узнали что-то новое из этой статьи. Удачи в ваших проектах!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
