如何将创建的对象插入div

Question

我使用jQuery创建了一个iframe，我希望将其嵌入到现有的div元素中。但是，当我使用innerHTML插入它时，它显示为：“[object HTMLIFrameElement]”

这可能是什么原因？

以下是示例：http://jsfiddle.net/MarkKramer/PYX5s/2/

Answer 1

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

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

Answer 2

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

而不是

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

应解决问题

Answer 3

您想使用appendChild方法而不是innerHTML。从

更改JSFiddle中的最后一行

iframediv.innerHTML = iframe;

到

iframediv.appendChild(iframe);

编辑以实际回答您的问题：

您的变量iframe是对DOM元素的引用。它的对象表示是一个<iframe>元素，而它的文本表示只是[object HTMLIFrameElement]。

通过使用innerHTML，您试图将其文本表示插入到DOM中。这就是该方法的工作原理。您可能会遇到JS代码，其中元素通过innerHTML添加到DOM，但它总是带有文本，例如。

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

在这种情况下，浏览器会正确地将<div>节点添加为element的子节点。

要使用变量<iframe>将iframe元素插入DOM，必须使用appendChild方法，该方法将IFrame对象作为子节点添加到iframediv。< / p>

Answer 4

发布的解决方案背后的想法是你可以使用iframe和它的容器作为 jQuery对象而不是常规的dom元素。 jQuery对象是对div或iframe的引用，它可以访问所有jQuery的真棒方法......例如.append()和.click()。

一般来说，jQuery的真正目的是转换代码行，如

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

......进入......

var iframediv = $("#iframecontainer");

...然后您可以随意使用，例如

iframediv.appendTo("#anotherDiv");

祝你好运。