为何设置outerHTML/innerHTML后输出[object HTMLDivElement]而非实际内容？

核心原因 #

outerHTML 和 innerHTML 属性要求赋值的是HTML字符串，但你直接传入了一个DOM元素对象（document.createElement('div')生成的实例）。JavaScript在把对象转为字符串时，会调用其默认的toString()方法，返回结果就是[object HTMLDivElement]，这就是你看到的输出。

解决办法 #

有两种常用的正确方式：

方式1：直接用DOM节点替换操作（推荐）

不需要通过HTML字符串中转，直接操作DOM树替换目标元素：

var div = document.createElement('div');
// 可以给div添加内容，比如你的第二个尝试：
div.innerHTML = '<div>hit1</div><div>hit2</div><div>hit3</div>';
// 替换cont元素
cont.parentNode.replaceChild(div, cont);

方式2：获取DOM元素的HTML字符串再赋值

如果一定要用outerHTML，可以通过DOM元素的outerHTML属性获取它对应的HTML字符串，再赋值给cont.outerHTML：

var div = document.createElement('div');
div.innerHTML = '<div>hit1</div><div>hit2</div><div>hit3</div>';
cont.outerHTML = div.outerHTML;

补充说明 #

你第二个尝试里给div设置了innerHTML，但问题根源还是直接把DOM对象赋值给了outerHTML，所以结果依然是对象转字符串的结果，和div内部有没有内容无关。必须把DOM对象转为对应的HTML字符串，或者直接用DOM节点替换才能达到预期效果。

内容的提问来源于stack exchange，提问作者Cain Nuke