Как вставить созданный объект в div

Question

Я создал iframe с помощью jQuery, который я хочу вставить в существующий элемент div. Однако, когда я использую innerHTML для его вставки, он отображается как: "[object HTMLIFrameElement]"

В чем может быть причина этого?

Вот пример: http://jsfiddle.net/MarkKramer/PYX5s/2/

Answer 1

Вы хотите использовать метод appendChild, а не innerHTML.Измените последнюю строку в JSFiddle с

iframediv.innerHTML = iframe;

на

iframediv.appendChild(iframe);

Изменить, чтобы фактически ответить на ваш вопрос:

Ваша переменная iframe является ссылкой на элемент DOM.Это объектное представление является элементом <iframe>, в то время как его текстовое представление просто [object HTMLIFrameElement].

Используя innerHTML, вы пытаетесь вставить его текстовое представление в DOM.Это как метод работает.Вы можете встретить код JS, где элементы добавляются в DOM через innerHTML, но он всегда с текстом, например

element.innerHTML = '<div>some text</div>';

. В этом случае браузер правильно добавит узел <div> в качестве дочернего элемента element.

Чтобы элемент <iframe> был вставлен в DOM с помощью переменной iframe, необходимо использовать метод appendChild, который добавит объект IFrame в качестве дочернего узла к iframediv.

Answer 2

Идея , стоящая за (большинством) опубликованных решений, заключается в том, что вы можете работать со своим iframe и его контейнером как объектами jQuery вместо обычных элементов dom. Объект jQuery является ссылкой на div или iframe, который имеет доступ ко всем удивительным методам jQuery ... как .append() и .click().

Вообще говоря, настоящая цель jQuery - переворачивать строки кода, как

var iframediv = document.getElementById('iframecontainer');

... в ...

var iframediv = $("#iframecontainer");

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

iframediv.appendTo("#anotherDiv");

Удачи.

Answer 3

$('#iframecontainer').append(iframe);

вместо

var iframediv = document.getElementById('iframecontainer');
iframediv.innerHTML = iframe;

должно решить проблему

Answer 4

var new_iframe = $("<iframe></iframe>");

new_iframe.appendTo($("#div_to_insert_into"));