JavaScript — это универсальный язык программирования, который позволяет создавать элементы и управлять ими так же, как HTML (язык гипертекстовой разметки). Он следует за методами «append()» и «appendChild()» для выполнения этой функции. Как следует из их названия, оба метода добавляют элементы HTML, такие как объекты String или Node. Однако они отличаются друг от друга в зависимости от их функциональных возможностей и других факторов.
В этом руководстве подчеркиваются ключевые различия между jQuery « добавить ()» и JavaScript « appendChild ()».
Прежде чем перейти к различиям между jQuery, добавить ()» и JavaScript « appendChild ()», сначала ознакомьтесь с основами этих методов.
Что такое метод jQuery append()?
jQuery “ добавить ()» вставляет нужные объекты «Node» и «String» в конец как последний дочерний элемент родительского элемента.
Синтаксис
$ ( селектор ) . добавить ( содержание , функция ( индекс , HTML ) )В приведенном выше синтаксисе:
- содержание : относится к элементам HTML, элементам DOM или объектам jQuery.
- функция : это дополнительный параметр, который указывает пользовательскую функцию JavaScript, имеющую параметры «index (позиция элемента)» и «html (html выбранных элементов)».
Что такое метод JavaScript appendChild()?
Метод «appendChild()» добавляет объект «Node» только после последнего дочернего элемента родительского элемента. Сначала он создает желаемый объект Node с помощью метода createElement(), а затем добавляет его.
Синтаксис
элемент. appendChild ( узел )Для этого синтаксиса требуется только один параметр, т. е. « узел ».
Как следует из их названий, рассмотренные выше методы отличаются друг от друга. В этом разделе приведены некоторые факторы, по которым они различаются. Давайте посмотрим на них.
Различия между методом append() в jQuery и методом appendChild() в JavaScript
| Условия | JQuery добавить() | JavaScript appendChild() |
|---|---|---|
| Применение | Его можно использовать для добавления родительского элемента путем добавления нового « Узел ' и ' Нить объекты одновременно. | Его можно использовать только для добавления родительского элемента с помощью нового « Узел », созданный с использованием « создатьЭлемент ()». |
| Несколько узловых объектов | “ добавить ()» может одновременно добавить несколько объектов Node в связанный с ним родительский элемент в следующем формате. Формат : «div.append(firstchild, secondchild, ‘Linuxhint’);» |
“ appendChild ()» отлично работает с несколькими объектами Node, но он добавляет только первый дочерний элемент за раз, а затем следующий. Формат : «div.appendChild(firstchild, secondchild, ‘Linuxhint’);» |
| Возвращаемое значение | “ добавить ()» не возвращает добавленный объект Node, поскольку он показывает «неопределенное» возвращаемое значение, т.е. Формат : console.log(appendChildValue) // не определено |
С другой стороны, « appendChild ()» возвращает значение, содержащее добавленный объект Node. Формат : console.log(appendChildValue) //
|
Теперь перейдем к практической реализации перечисленных ключевых отличий.
Отличие 1: Применение методов jQuery append() и JavaScript appendChild()
Согласно первому отличию, « добавить ()» добавляет как Node, так и String, а метод «appendChild()» добавляет только объекты Node.
HTML-код
Во-первых, взгляните на указанный HTML-код:
< тело >< h2 > Метод jQuery «добавить ()» < / h2 > //Для добавления() < h2 > Метод jQuery 'appendChild()' < / h2 > //Для appendChild()
< кнопка идентификатор '=' 'бтн1' по щелчку '=' 'мояФункция1()' > Добавить строку DOM < / кнопка >
< кнопка идентификатор '=' 'бтн2' по щелчку '=' 'мояФункция2()' > Добавить узел DOM < / кнопка >
< п идентификатор '=' 'для' > Это абзац. < / п >
< ол идентификатор '=' 'список' >
< что > Учебник по JavaScript 1 < / что >
< что > Учебник по JavaScript 2 < / что >
< что > Учебник по JavaScript 3 < / что >
< / ол >
< / тело >
В приведенных выше строках кода:
- Тег «
» определяет подзаголовок уровня 2.
- Теги «
- Тег «
» создает пустой абзац с назначенным идентификатором «para», чтобы показать добавленное строковое значение.
- Тег «
- » добавляет упорядоченный список с идентификатором «list», а элементы списка — с помощью тегов «
- ».
Примечание : Следуйте приведенному выше HTML-коду в первом различии методов «append()» и «appendChild()».
Метод «append()» Код jQuery
Во-первых, обзор jQuery-кода метода «append()»:
< голова >< источник сценария '=' 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > сценарий >
< сценарий >
$ ( документ ) . готовый ( функция ( ) {
$ ( '#бтн1' ) . нажмите ( функция ( ) {
$ ( 'п' ) . добавить ( ' Добавленная строка .' ) ;
} ) ;
$ ( '#бтн2' ) . нажмите ( функция ( ) {
$ ( 'ол' ) . добавить ( '
} ) ;
} ) ;
сценарий >
голова >
В приведенных выше строках кода:
- Во-первых, укажите jQuery “ CDN 'путь с официального сайта' https://jquery.com/ » с помощью « источник атрибут.
- Затем добавьте небольшой раздел сценария, который сначала использует « готовый ()» для вызова указанного « функция ()» при загрузке HTML-документа.
- После этого « нажмите ()» выполняет функцию, связанную с кнопкой, идентификатор которой « бтн1 ” после нажатия кнопки.
- В определении функции « добавить ()» используется для добавления к целевому элементу абзаца указанной строки.
- Тот же процесс выполняется для добавленных « упорядоченный список », т. е. объект Node, чтобы добавить его к данному элементу.
Выход
Здесь подтверждается, что объекты «String» и «Node» добавляются с помощью метода «append()».
JavaScript-код метода «appendChild()»
Теперь посмотрим на метод JavaScript «appendChild()» практически:
< сценарий >функция myFunc1 ( ) {
для. appendChild ( '
Добавленная строка
' ) //Добавить строку DOM} функция myFunc2 ( ) {
константа элемент '=' документ. создатьЭлемент ( 'что' ) ;
константа узел '=' документ. создатьтекстовыйузел ( «Добавленный элемент» ) ;
элемент. appendChild ( узел ) ; //Добавить DOM-узел
константа элемент '=' документ. получитьэлементбиид ( 'список' ) ;
элемент. appendChild ( элемент ) ;
}
сценарий >
В приведенном выше фрагменте кода:
- Определите имя функции ' myFunc1 ()», который использует метод «appendChild()» для добавления к добавленному абзацу заданной строки.
- Далее в разделе « myFunc2 ()», метод createElement() создает новый элемент списка, а затем добавляет к нему текст с помощью метода createTextNode().
- После этого дополнить созданный узел списка его текстом с помощью метода «appendChild()».
- Наконец, добавьте вновь созданный узел списка к доступному упорядоченному списку с идентификатором «list» с помощью метода «appendChild ()».
Выход
Как видно, при нажатии кнопки добавляется только объект «Узел», а не «Строка».
Ошибка
Нажмите «F12», чтобы открыть веб-консоль и изучить проблему:
Как видно, консоль показывает ошибку при добавлении объекта String с помощью метода «appendChild()». Следовательно, подтверждается, что метод «appendChild()» не добавляет объект String.
Отличие 2: Применение методов jQuery append() и JavaScript appendChild() к объектам с несколькими узлами
Второе различие между методами «append()» и «appendChild()» можно проанализировать, применяя эти методы к нескольким объектам-узлам. Чтобы увидеть его практическую реализацию, следуйте приведенным кодам.
HTML-код
Пройдемся по HTML-коду:
< див идентификатор '=' 'main-div' >< див стиль '=' 'display: flex; justify-content: center; align-items: center; ширина: 50 пикселей; высота: 50 пикселей; фон: оранжевый; поле: 10 пикселей; выравнивание текста: центр;' > Один < / див >
< див стиль '=' 'display: flex; justify-content: center; align-items: center; ширина: 50 пикселей; высота: 50 пикселей; фон: оранжевый; поле: 10 пикселей; выравнивание текста: центр;' > Два < / див >
< див стиль '=' 'display: flex; justify-content: center; align-items: center; ширина: 50 пикселей; высота: 50 пикселей; фон: оранжевый; поле: 10 пикселей; выравнивание текста: центр;' > Три < / див >
< / див >
Здесь приведенные выше строки кода содержат основной элемент «
Примечание : HTML-код, написанный выше, следует во втором отличии методов «append()» и «appendChild()».
добавить () метод
Теперь приступайте к следующему сценарию:
< сценарий >константа основной раздел '=' документ. получитьэлементбиид ( 'main-div' ) ;
константа div4 '=' документ. создатьЭлемент ( 'див' ) ;
раздел 4. внутреннийHTML '=' «Четыре» ;
раздел 4. стиль . фоновый цвет '=' 'розовый' ;
раздел 4. список классов . добавлять ( 'див' ) ; константа раздел5 '=' документ. создатьЭлемент ( 'див' ) ;
раздел5. внутреннийHTML '=' 'Пять' ;
раздел5. стиль . фоновый цвет '=' 'розовый' ;
раздел5. список классов . добавлять ( 'див' ) ;
основной отдел добавить ( div4 , раздел5 ) ;
сценарий >
В приведенном выше фрагменте кода:
- Переменная «maindiv» обращается к добавленному «div» по его идентификатору «main-div» с помощью метода «getElementById()».
- Затем метод «createElement()» создает новый объект узла «div», добавляет указанный текст с помощью свойства «innerHTML» и применяет цвет фона с помощью свойства «style.backgroundcolor».
- После этого метод «add()» добавляет к нему указанные CSS-свойства класса с помощью свойства «classList».
- Та же процедура выполняется для следующего вновь созданного элемента «».
- Наконец, оба вновь созданных объекта Node добавляются одновременно с помощью метода «append()».
Выход
Здесь вновь созданные несколько объектов Node соответственно присоединяются к одному и тому же родительскому элементу.
Метод «appendChild()»
Затем продолжите с методом «appendChild()»:
< сценарий >
основной отдел appendChild ( div4 ) ;
основной отдел appendChild ( раздел5 ) ;
сценарий >Как видно, метод «appendChild()» добавляет несколько объектов Node один за другим к одному и тому же родительскому элементу.
Выход
Вывод такой же, как у метода «append()», но отличается указанием объектов Node.
Отличие 3: возвращаемое значение примененных методов jQuery append() и JavaScript appendChild()
Последнее отличие — это «возвращаемое значение» методов «append()» и «appendChild()». Давайте посмотрим на это практически.
Примечание : HTML-код такой же, как и в Difference 2 (Multiple Node Objects).
Метод «добавить()»
Посмотрите на приведенные строки кода:
< сценарий >
консоль. бревно ( основной отдел добавить ( div4 ) ) ;
сценарий >Здесь метод «console.log()» применяется для проверки возвращаемого значения метода «append()» при добавлении указанного объекта Node.
Выход
Нажмите «F12», чтобы открыть веб-консоль:
Как видно, возвращаемое значение метода «append()» равно « неопределенный ».
Метод appendChild()
Теперь рассмотрим следующий код, использующий метод «appendChild()»:
< сценарий >
консоль. бревно ( основной отдел appendChild ( div4 ) ) ;
сценарий >Укажите метод «appendChild()» с методом «console.log()», таким же, как и метод «append()».
Выход
Здесь выходные данные вместо этого возвращают добавленный элемент HTML, включая свойства стиля.
Заключение
jQuery “ добавить ()» и JavaScript « appendChild ()» методы различаются в зависимости от их « синтаксис», «использование» и «множество объектов Node. ». Более того, их « возвращаемые значения ” также отличаются друг от друга. Оба метода полезны, и их использование зависит от выбора пользователя. В этом руководстве перечислены различия между jQuery « добавить ()» и JavaScript « appendChild ()» метод практически.