Доступ к созданным элементам DOM

Question

У меня есть код для создания еще одной «строки» (div с входами) по нажатию кнопки. Я создаю новые элементы ввода, и все работает нормально, однако я не могу найти способ доступа к этим новым элементам.

Пример: у меня есть элемент ввода (имя_1 ниже). Затем я создаю другой элемент ввода (имя_2 ниже), используя функцию createElement JavaScript.

<input type='text' id='name_1' name="name_1" />
<input type='text' id='name_2' name="name_2" />

Опять же, я прекрасно создаю элемент, но хочу иметь возможность доступа к значению name_2 после того, как он был создан и изменен пользователем. Пример: document.getElementById('name_2');

Это не работает. Как заставить DOM распознавать новый элемент? Возможно ли это?

Пример моего кода (с использованием jQuery):

function addName(){
var parentDiv = document.createElement("div");
$(parentDiv).attr( "id", "lp_" + id );

var col1 = document.createElement("div");
var input1 = $( 'input[name="lp_name_1"]').clone(true);
$(input1).attr( "name", "lp_name_" + id );
$(col1).attr( "class", "span-4" );
$(col1).append( input1 );

$(parentDiv).append( col1 );

$('#main_div').append(parentDiv);
}

Я использовал селекторы jQuery и JavaScript. Пример: $('#lp_2').html() возвращает ноль. Так же document.getElementById('lp_2');

Answer 1

Вы должны создать элемент И добавить его в DOM, используя такие функции, как appendChild. Подробнее см. здесь .

Я предполагаю, что вы вызвали createElement (), но никогда не добавляли его в иерархию DOM.

Answer 2

Большое спасибо за ваши ответы. Отойдя и вернувшись к своему коду, я заметил, что допустил ошибку. У меня было две функции, которые добавляли строку по-разному. Я был «на 100% уверен», что звоню правильно (пример кода, который я разместил), но, увы, я не был.

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

Мой пример кода был на 100% правильным для того, что мне было нужно, мне просто нужно было это назвать. (Duh!)

Еще раз спасибо за вашу помощь,

-Jamie

Answer 3

var input1 = $( 'input[name="lp_name_1"]').clone(true);

должно быть

var input1 = $( 'input[@name="lp_name_1"]').clone(true);

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

Редактировать: только что сказали, что это верно только для более старых версий JQuery, поэтому, пожалуйста, не обращайте внимания на мой совет.

Answer 4

var input1 = $ ('input [name = "lp_name_1"]'). Clone (true);

Код, который вы опубликовали, не указывает ни на один элемент с таким атрибутом имени. Непосредственно перед этой частью вы создаете элемент с атрибутом id , который похож, но вы бы использовали $("#lp_1") для его выбора, и даже он не будет работать, пока вы не вставите его в документ, Вы не делаете до тех пор, пока потом.

Answer 5

Если он правильно добавлен в дерево доменов, вы сможете запросить его с помощью document.getElementById. Однако ошибки браузера могут вызывать проблемы, поэтому используйте инструментарий JavaScript, например jQuery, который работает с ошибками браузера.