Question

我有一些javascript创建了许多DOM节点，因此节点可以分配各种动画功能。动画功能由一系列其他功能调用。

我有一种情况，在对象上调用new是从先前创建的对象中删除内部HTML。使用调试器，我跟踪调用appendChild。在调用之前，内部HTML就在那里，之后就消失了。这让我很难过。

以下是HTML源代码：

//modeler.html
<html>
<head>
  <script type="text/javascript" src="modeler.js"></script>
  <script type="text/javascript" src="drawer.js"></script>
  <link rel="stylesheet" type="text/css" href="modeler.css">
  <link rel="stylesheet" type="text/css" href="drawer.css">
</head>
<body>
  <script type="text/javascript">
    var modeler, thing, leftDrawer, rightDrawer;

    modeler = new Modeler;

    thing = document.createElement('div');
    thing.innerHTML = 'hello world';

    leftDrawer = new Drawer('leftDrawer', 'left', thing);
    rightDrawer = new Drawer('rightDrawer', 'right', thing);
  </script>
</body>
</html>

在上文中，注释leftDrawer和rightDrawer都分配了新的Drawer。在分配rightDrawer之后，问题就出现了。

// modeler.js

function Modeler () {
  var modeler = document.createElement('div');
  modeler.id = 'modeler';
  document.body.appendChild(modeler);
};

'modeler'是主要的包含元素。

单步调试器显示leftDrawer = new Drawer创建的节点的内部HTML存在，但是当调用rightDrawer = new Drawer时，leftDrawer创建的节点的内部HTML是删除。

// drawer.js

function Drawer (id, side, contents) {
  var drawer;

  this.id = id;
  this.side = side.toLowerCase();

  drawer = document.createElement('div');
  drawer.className = 'drawer' + ' ' + 'drawer' + (side[0].toUpperCase() + side.slice(1));
  drawer.id = id;

  if (contents) {
    drawer.appendChild(contents); // After this point, the inner HTML disappears 
  } else {
    console.log('No content given to Drawer');
  };

  document.getElementById('modeler').appendChild(drawer);
};

modeller div中包含的最终HTML如下所示：

<div class="drawer drawerLeft" id="leftDrawer"></div>
<div class="drawer drawerRight" id="rightDrawer">
  <div>hello world</div>
</div>

它应该是这样的：

<div class="drawer drawerLeft" id="leftDrawer">
  <div>hello world</div>
</div>
<div class="drawer drawerRight" id="rightDrawer">
  <div>hello world</div>
</div>

为什么内部HTML会从以前创建的元素中消失？

Answer 1

问题是contents和leftDrawer的{{1}}相同。

因此，如果你追加它两次，我会移动但不会被复制。

您必须自己复制：

rightDrawer

＆＃13;

drawer.appendChild(contents.cloneNode(true));

＆＃13;

AppendChild导致另一个节点的内部HTML消失

1 个答案: