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

Question

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

Пример: У меня есть элемент ввода (имя_1 ниже). Затем я создаю еще один элемент ввода (name_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() возвращает null. Так document.getElementById('lp_2');

Answer 1

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

Я предполагаю, что вы вызвали 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); 

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

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

Answer 5

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

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

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

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

-Jamie