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

Question

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

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

<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

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

Answer 3

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

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

Answer 4

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

должно быть

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

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

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

Answer 5

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

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

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

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

-Джейми