innerHTML插入节点失败的解决方法

发表于 | 分类于 |

前段时间在工作中遇到一个问题。我选取了一个元素节点，使用 innerHTML 和 outterHTML 都会插入失败（google 浏览器），但之前我又好像都能成功插入。后来问了我老大（某个资深全栈工程师），才发现当使用 innerHTML 和 outterHTML 插入元素节点时会先自动使用它们的 tostring 方法，所以会插入失败。看下面的例子：

1
2
3
4
5
6
var txtEle = "<div>我是可以插入的</div>";
var ele = document.getElementById(ID);
var ele1 = document.getElementById(ID1);
ele.innerHTML = txtEle; //成功了
ele.innerHTML = ele1; //失败了
//outterHTML也一样，不过outterHTML是包含外层标签的。

这个时候就会出现 插入的内容变成了

1
[object HTMLDivElement]         //我上面是div元素，所以是Div节点

这就是这个元素节点自动执行了它的 tostring()方法的结果，但这显而不是我们想要的效果。要想将这个元素节点插入到目标节点中，应该使用 appendChild()方法或者 insertBefore()方法。

appendChild()是在需要插入的 element 节点上调用，插入的节点将会成为该节点的最后一个子节点。

insertBefore()接受两个参数，第一个是待插入的节点，第二个是已存在的节点。

需要注意的是：

  1. 新节点插入在该节点前面,这个方法是在新节点的父节点调用。
  2. 如果调用 appendChild()和 insertBefore()将已存在文档的一个节点再次插入，
  3. 那个节点将自动从当前位置删除并在新位置重新插入

[越努力，越幸运！]