通过 JavaScript 使用 IFrame 添加 div答案

【问题标题】：Adding Div With IFrame Through JavaScript通过 JavaScript 使用 IFrame 添加 div
【发布时间】：2022-09-25 01:25:00
【问题描述】：

我需要通过 JS newProductPanelContainer insie replaceclass=\"Replace\"。我想知道为什么这没有添加任何东西？我正在向它添加一个 iframe。

在哪里添加

<div class=\"Replace\">
  <div class=\"hello\">Hello</div>
  <div class=\"hi\">Hi</div>
  <div class=\"yes\">Wait</div>
</div>

预期产出

<div class=\"Replace\">
  <div class=\"hello\">Hello</div>
  <div class=\"hi\">Hi</div>
  <div class=\"yes\">Wait</div>
  <div class=\"newProductPanelContainer\">
    <iframe id=\"productPanelIFrame\" src=\"https://test.com\" width=\"100%\" height=\"100%\" style=\"border: none\"></iframe>
  </div>
</div>

iframe div

<script type=\"text/javascript\">
  var innerDiv = document.createElement(\"div\");
  innerDiv.className = \'newProductPanelContainer\';
  innerDiv.innerHTML = `<iframe id=\"productPanelIFrame\" src=\"https://test.com\" width=\"100%\" height=\"100%\" style=\"border: none\"></iframe>`;
  innerDiv.style.width = \"100%\";
    var hello = document.getElementsByClassName(\"Replace\");
hello.appendChild(innerDiv);

</script>

这是什么意思？ innerDiv = document.createElement(\"newProductPanelContainer\") 更多参数信息：developer.mozilla.org/en-US/docs/Web/API/Document/createElement
@郝乐。更新了我的问题
我没有看到您在 DOM 中添加 innerDiv 的任何地方
@JonP。更新了我的问题
replaceclass=\"Replace\" 和class=\"Replace\" 不一样，所以document.getElementsByClassName(\"Replace\"); 不起作用

标签： javascript css ecmascript-6

【解决方案1】：

getElementsByClassName 返回一个集合。您可以遍历集合并将 iframe 添加到集合中的每个元素，或者选择一个（可能是第一个）元素并将 iframe 添加到该元素。

或者使用 querySelector 方法，它返回 DOM 中的第一个匹配元素。这就是我在下面所做的。注意不要与querySelectorAll 混淆，它返回一个集合。

var innerDiv = document.createElement("div");
  innerDiv.className = 'newProductPanelContainer';
  innerDiv.innerHTML = `<p>I'm inserted</p><iframe id="productPanelIFrame" src="https://test.com" width="100%" height="100%" style="border: none"></iframe>`;
  innerDiv.style.width = "100%";
    var hello = document.querySelector(".Replace");
hello.appendChild(innerDiv);

<div class="Replace">
  <div class="hello">Hello</div>
  <div class="hi">Hi</div>
  <div class="yes">Wait</div>
</div>

【讨论】：

【解决方案2】：

#1：您不能仅使用 document.createElement("newProductPanelContainer") 创建具有特定类名 newProductPanelContainer 的元素

你可以使用第二个参数来做到这一点（options）refer this

#2: 无法获取 un-mount 元素的 DOM const productPanelIFrame = document.getElementById("productPanelIFrame");

Iframe.productPanelIFrame 是 div.newProductPanelContainer 的子代。但是你可以看到，它的父级还没有挂载。

【讨论】：

我已经更新了我的问题
您是否将 innerDiv 添加到 DOM 中？请告诉我您何时想添加此 iframe。每当用户单击按钮或其他东西时
我在我的问题中添加了预期的输出。我更新了我的问题
getElementsByClassName 返回一个集合而不是一个元素

【解决方案3】：

尝试这个。这个对我有用

const innerDiv = document.createElement("div");
innerDiv.className = "newProductPanelContainer";
innerDiv.style.width = "100%";
const iFR = document.createElement("iframe");
iFR.id = "productPanelIFrame";
iFR.src = "https://test.com";
iFR.width = "100%";
iFR.height = "100%";
iFR.style = "border: none";

const hello = document.getElementsByClassName("Replace");
hello[0].appendChild(innerDiv);
innerDiv.appendChild(iFR);

【讨论】：

here is sandbox
iframe 是动态的。不应该在这里创建
@Joseph 当您想添加 iframe 时？