GetElementById Где элемент динамически создается во время выполнения

Я создал объект во время выполнения с помощью тега innerHTML, теперь я хочу получить доступ к этому элементу с помощью getElementById, когда я обратился к элементу с его возвращаемым значением NULL. Пожалуйста, предложите мне любое направление, чтобы я мог добиться этого,

Вот следующий подсказку кода, которую я использую

В HTML

<div id="web">
<object id="test"></object>
</div>

В JS

document.getElementById("web").innerHTML="<object id='test2'></object>";
.
.
var obj = document.getElementById("test2");

Здесь obj возвращает значение null.

Ответ 1

Вы назначили идентификатор только что созданному элементу? Вы ввели элемент в дерево документа (используя appendChild или insertBefore)? Пока элемент не вставлен в DOM, вы не можете получить его с помощью document.getElementById.

Пример создания элемента:

var myDiv = document.createElement('div');
myDiv.id = 'myDiv';
document.body.appendChild(myDiv);
document.getElementById('myDiv').innerHTML = 'this should have worked...';

[ изменить]. С учетом более позднего кода появляется третий вопрос: находится ли ваш script в нижней части страницы html (прямо перед закрывающим тегом </body>)? Если он находится в заголовке документа, ваши сценарии могут выполняться до того, как дерево документа будет полностью отображено. Если ваш script должен находиться в заголовке документа, вы можете использовать обработчик нагрузки для его запуска после рендеринга документа:

window.onload = function(){
  document.getElementById("web").innerHTML='<object id="test2"></object>';
  // [...]
  var obj = document.getElementById('test2');
};

Ответ 2

Чтобы добавить элемент с использованием JavaScript, вам нужно сделать 2 вещи.

Создайте элемент

var element = document.createElement(tagName);
Добавьте его в dom

document.body.insertBefore(селектор, элемент);

или

  document.getElementByID(selector).appendChild(element);

Дополнительная информация здесь: MDN

Ответ 3

Если динамически создается DOM node, тогда нет необходимости снова найти его с помощью document.getElementById().

Создав node правильным способом, вы можете сохранить ссылку на него как переменную javascript, которая может использоваться в любом месте области видимости.

Например:

window.onload = function(){
    var myDiv = document.createElement('div');
    document.body.appendChild(myDiv);

    //and now a function that called in response to some future event
    function whatever(){
        ...
        myDiv.style.color = 'red';
        ...
    }
};

Примечание. Внутренняя функция (называемая в какой-то точке (точках) в будущем) имеет доступ к переменной myDiv, поскольку внешняя функция формирует "закрытие", внутри которой переменные сохраняются в живых и доступных, хотя внешняя функция завершено и возвращено.