Question

我正在尝试在我的一个项目的嵌套divs结构内添加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>

Answer 1

您成功附加了窗口小部件，但之后立即用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>

我如何通过类将孩子添加到嵌套的div结构中

1 个答案: