Доступ к созданным элементам DOM
У меня есть код для создания еще одной «строки» (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() возвращает null. Как и document.getElementById('lp_2');
Добавил в свой пост. Я использую селектор jQuery, чтобы добраться до любого из элементов, и прямой JavaScript, и ни один из них не получает элемент.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы должны создать элемент И добавить его в DOM, используя такие функции, как appendChild. Подробнее см. здесь.
Я предполагаю, что вы вызвали createElement (), но никогда не добавляли его в свою иерархию DOM.
Я использую функцию добавления (содержимого) jQuery для добавления новых элементов. Согласно документации это то же самое, что и appendChild (). По-прежнему не повезло.
Если он правильно добавлен в дерево доменов, вы сможете запросить его с помощью document.getElementById. Однако ошибки браузера могут вызвать проблемы, поэтому используйте набор инструментов JavaScript, например jQuery, который работает с ошибками браузера.
На самом деле я использую jQuery, но не думал, что мне нужно добавлять это к вопросу. Однако jQuery очень помог.
Можно ли получить элемент с помощью селекторов jQuery, например $ ("# name_2") вместо getElementById ()? Если нет, это, по крайней мере, поможет устранить проблемы с браузером.
Я пробовал и то, и другое безрезультатно. Пример: $ ('# lp_2'). Html (). (нулевой)
var input1 = $( 'input[name = "lp_name_1"]').clone(true);
В опубликованном вами коде не указан какой-либо элемент с таким атрибутом имени. Непосредственно перед этой частью вы создаете элемент с аналогичным атрибутом я бы, но вы должны использовать $("#lp_1") для его выбора, и даже он не будет работать, пока вы не вставите его в документ, чего вы не делаете до тех пор, пока не вставите его в документ.
Элемент ввода с именем lp_name_1 является частью страницы в ее исходной форме. Я клонирую этот элемент, чтобы можно было ввести второе имя. Поле имени всегда будет там. Другое дело: создание элементов работает, а добраться до них потом - нет.
var input1 = $( 'input[name = "lp_name_1"]').clone(true);
должно быть
var input1 = $( 'input[@name = "lp_name_1"]').clone(true);
Сначала попробуйте это, убедитесь, что input1 действительно что-то возвращает (возможно, какой-то оператор отладки), чтобы убедиться, что это не проблема.
Обновлено: только что сказали, что это верно только для более старых версий JQuery, поэтому, пожалуйста, проигнорируйте мой совет.
Это синтаксис xPath, он не нужен и долгое время не работал в jQuery.
Ох, круто, не осознавал этого. Ранее играл с демонстрацией, и запрос не работал бы без @. Просто перепроверили, и сайт использовал старую версию jquery, что объясняет это. Спасибо за информацию!
Большое вам спасибо за ваши ответы. Уйдя и вернувшись к своему коду, я заметил, что совершил ошибку. У меня было две функции, которые добавляли строку по-разному. Я был «на 100% уверен», что звоню правильно (пример кода, который я опубликовал), но, увы, это не так.
Для тех, кто также испытывает проблемы, я бы сказал, что все полученные мной ответы - отличное начало, и я использовал их для отладки, они обеспечат правильность вашего кода.
Мой пример кода был на 100% правильным для того, что мне было нужно, мне просто нужно было его вызвать. (Ду!)
Еще раз спасибо за вашу помощь,
-Джейми
Можете ли вы опубликовать образец кода? Я не понимаю, почему это не должно работать ... может быть, я что-то упускаю