Jquery before append: .insertBefore() | jQuery API Documentation

Leave a Comment / Разное / By /

jQuery: добавить дочерний элемент перед дочерним элементом

спросил

Изменено 9 лет, 2 месяца назад

Просмотрено 12 тысяч раз

У меня есть такой HTML-код:

 

    <дел>

Я хочу добавить дочерние элементы внутри div#content перед элементом div.foobar . Как это сделать?

  • jquery
  • добавление
  • родитель-потомок
  • добавлениеребенок

3

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

Добавить означает, что вы можете вставлять элементы как дочерние элементы в конце селектора

пример

append() и appendTo()

Prepend означает, что вы можете вставлять элементы как дочерние элементы в начале селектора

пример prepend() и prependTo()

считается родителем

До означает, что вы можете добавлять элементы непосредственно перед селектором0005

пример after() и insertAfter()

до и после не рассматривает селектор как родитель элемент

Теперь, чтобы ответить на ваш вопрос <дел> <дел>

$(«ваш элемент»). insertBefore(«#content div.foobar») // или $(«#content div.foobar»).before(«элемент») // или $(«#content»).prepend(«элемент») // или $(«элемент»).prependTo(«#контент»)

Обратите внимание на позиции селектора в prepend() и prependTo()

1

Вы можете использовать before()/insertBefore() как

 $('#content .foobar').before(newcontent)
$(newcontent).insertBefore('#content .foobar')

или если вы хотите вставить новый контент в качестве первого потомка #content , используйте prepend()

 $('#content').prepend(newcontent)

6

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

методов jQuery: append() | Карьера Карма

jQuery: краткое введение

jQuery — это библиотека JavaScript, которая позволяет разработчикам манипулировать DOM, писать обработчики событий, анимацию и запросы AJAX с помощью всего нескольких строк кода. Это возможно с помощью селекторов и методов, уникальных для jQuery API. Одним из этих методов является добавить() .

Что такое jQuery append()?

добавить() метод может принимать один или несколько аргументов «контента» (который может быть строкой HTML, текстом, массивом, элементом или более jQuery) и присоединять или «добавлять» его в конец любого или всех соответствующих элементов. селектор. Некоторые распространенные варианты использования включают добавление элемента в конец списка (например, нового элемента «сделать» в списке дел) или отображение нового содержимого по нажатию кнопки. Теперь давайте посмотрим, как

добавить() работает с некоторым примером кода.

Как использовать jQuery для добавления()

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

Найдите свой матч для буткемпа

  • Career Karma подберет для вас лучшие учебные курсы по технологиям
  • Получите доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес
Программная инженерия Дизайн Наука о данных Аналитика данных Информационная безопасность Имя

Фамилия

Электронная почта

Номер телефона

Продолжая, вы соглашаетесь с нашими Условия использования и политика конфиденциальности , и вы соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронной почте.

Начнем с нашего HTML, который создает базовый список дел:

 

<голова>  
<тело>
 
Список дел
 
<ол>

  • Прочитайте главы 1 и 2 
    • 

  • Встреча в 15:00
    • 

  • Напишите о вчерашнем прочтении
    •

    Важно отметить, что адрес jQuery API должен быть включен в <скрипт> тег в

    <голова> HTML-страницы. В противном случае мы не сможем использовать jQuery на нашей HTML-странице.

    Теперь наш список дел отображается красиво!

    Сегодня мы чувствуем себя продуктивно, так что давайте добавим пункт в конец списка. А планы на ужин?

    Ссылаясь на наш макет HTML, мы видим упорядоченный список ( <ол> ) имеет класс список1 . Это отличная новость, потому что мы можем выбрать весь этот выбор, добавив еще один <скрипт> тег в нижней части:

     <скрипт>
 $(документ).ready( () => {
   $(".list1").append("
  • Составить планы на ужин
    • ")
 })

    Внутри <скрипт> тег, у нас есть несколько символов $. Что это? Это мощные селекторы jQuery.

    Мы можем выбрать что угодно в нашей DOM, передав элемент, имя класса или имя идентификатора, чтобы назвать несколько. В данном случае мы выбрали что-нибудь с классом

    список1, который выделит весь <ол> элемент. Выше (документ) селектор выбирает всю страницу и вызывает готовый() метод ожидания вызова следующей строки кода до полной загрузки страницы. Это помогает поддерживать последовательную работу нашего кода.

    Теперь внутри нашего готовый() функция обратного вызова, мы выбрали все элементы с классом список1. В этом случае это выберет наш <ол> и вставьте

  • перешел к добавить() чуть выше нашего закрытия . Итак, после загрузки нашей страницы Составьте планы на ужин элемент списка будет добавлен к нашему списку дел:

    Фантастика! Теперь давайте посмотрим на другой пример. На этот раз давайте отобразим больше контента после нажатия кнопки.

    jQuery append(): реальный пример

    Предположим, у нас есть кнопка на нашей веб-странице, и мы хотим отображать новый контент при нажатии на кнопку. Было бы более эффективно и приятно для наших пользователей, если бы мы отображали новый контент без обновления страницы или перенаправления.

    «Карьерная карма вошла в мою жизнь, когда я больше всего в ней нуждалась, и быстро помогла мне пройти буткемп. Через два месяца после выпуска я нашла работу своей мечты, которая соответствовала моим ценностям и целям в жизни!»

    Венера, инженер-программист в Rockbot

    В этом сила и элегантность jQuery : мы можем отображать новый контент без обновления или перенаправления при нажатии кнопки.

    Учитывая этот базовый HTML:

     

<голова>  
<тело>
<дел>
  
    Привет, мир!

    • Очень похоже на то, как мы начали наш список дел, за исключением того, что у нас есть кнопка:

    Давайте используем то, что мы узнали о jQuery, чтобы добавить больше контента в «Hello World!» после нажатия кнопки.

     <скрипт>
  $(документ).ready( () => {
    $("#main-btn").click( () => {
      $("p").append("До свидания")
    })
  })

    Мы снова включили тег

    Как только документ загружен, мы теперь можем нажать кнопку и вызвать щелчок() метод на нашей кнопке. Теперь наш

    тег выбран, и мы вызываем добавить() метод с содержимым аргумента строки HTML ” До свидания". Это вставит слово До свидания жирным шрифтом в конце

    ярлык.

    Наш окончательный вывод будет выглядеть так:

     <дел>
 
    Привет, мир.
    До свидания.

    А на экране так:

    Или если мы хотим добавить До свидания до конца <дел> , мы просто меняем

    селектор в класс содержание :

     <скрипт> $(документ).