时间戳

首页 > 解决方案 > 如何将孩子添加到带有类的嵌套 div 结构中

javascript - 如何将孩子添加到带有类的嵌套 div 结构中

问题描述

我正在尝试在我的一个项目中的嵌套 div 结构中添加一个 div。

下面是我为复制行为而编写的示例。单击按钮后我无法看到小部件 div 可能会出现什么问题？

function myFunction() {
  var widget = document.createElement("div");
  widget.id = 'widget';
  widget.innerHTML = "I am Widget";
  var x = document.getElementsByClassName("model-viewer");
  x[0].appendChild(widget);

  console.log(x)
  x[0].innerHTML = "Hello World!";
}
<div class="example">First div element with class="example".
  <div class="app_main">
    <div class="model"></div>
    <div class="model-filter">
      <div class="model-viewer">hello</div>
    </div>
    <div class="mod"></div>
  </div>
</div>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

标签： javascripthtml

解决方案

innerHTML您已成功附加小部件，但随后您立即将其覆盖。

调用该appendChild函数后，您的 HTML 如下所示：

<div class="model-viewer">
  hello
  <div id="widget">
    I am Widget
  </div>
</div>

然后你打电话innerHTML，它会替换里面.modal-viewer的所有代码（包括#widget）。

您可以使用insertAdjacentHTML将小部件附加到元素之后。

function myFunction() {
  var widget = document.createElement("div");
  widget.id = 'widget';
  widget.innerHTML = "I am Widget";
  var x = document.getElementsByClassName("model-viewer");

  // x[0].appendChild(widget); // OLD WAY
  x[0].insertAdjacentHTML('afterEnd', widget.innerHTML); // NEW WAY

  console.log(x)
  x[0].innerHTML = "Hello World!";
}
<div class="example">First div element with class="example".
  <div class="app_main">
    <div class="model"></div>
    <div class="model-filter">
      <div class="model-viewer">hello</div>
    </div>
    <div class="mod"></div>
  </div>
</div>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

推荐阅读