jQuery, добавляющий объект несколько раз

Я не уверен, что именно здесь происходит, я думаю, что переменная является объектом jquery.

это добавляется только один раз, мой вопрос-почему?

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

хотя это работает, как я предполагаю

var newInput = '<input>';
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

Спасибо за вашу помощь!

8
append jquery object variables

3 ответов

когда вы $('<input/>'), jQuery создает input элемент DOM для вас.

когда вы .append() элемент DOM, он отсоединяет элемент от его предыдущей позиции. (См. Скрипка)

таким образом, второй .append() call удалит его оттуда, где он был добавлен первым, и разместит его в новой позиции.

когда вы добавляете строку, элемент DOM создается так, как он добавляется.

10

в первом случае $ проанализирует ваш html и создаст новый объект jQuery, который будет обертывать HTMLInputElement.

в основном, это как делать:

var $newDiv = $('#newDiv'),
    newInput = document.createElement('input');

$newDiv.append(newInput);
$newDiv.append(newInput);

во втором случае он анализирует html каждый раз, генерируя другой объект jQuery для каждого экземпляра.

вот как можно исправить первый образец:

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput.clone());
15

Это потому, что в первом случае он относится к тому же элементу объект (добавляет тот же элемент, поэтому он добавляется в новое место), а во втором случае вы добавляете html как строку, поэтому он добавляет несколько элементов (каждый раз новый элемент).

1