Javascript 将动态生成的html元素附加到html中的现有元素

我使用javascript生成了一个div元素：

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

iDiv.innerHTML = "I'm the first div";

现在我有了一个方法，它将“div”元素返回给第一个创建的div元素（

id=“block”

）。我只是接收一个函数（returnDiv（））的输出，我无法控制方法内部的任何更改。结果如下：

// returnDiv() returns me the following output which I am collecting in innerDiv variable

var innerDiv = <div style="width: 30px;"><div class="pBar" style="width: 100%;"><span title="100.00%" class="l r" style="background: red; left: 1px; width: 30px; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span><span title="0.00%" class=" r" style="background: rgb(255, 194, 0); left: 31px; width: 0px; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span></div></div>;

//document.createElement('div');

//innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.

iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";

//returnDiv（）返回我正在innerDiv变量中收集的以下输出
var innerDiv=；
//document.createElement（'div'）；
//innerDiv.className='block-2'；
//变量iDiv仍然很好。。。只是附加到它上面。
iDiv.appendChild（innerDiv）；
innerDiv.innerHTML=“我是内部div”；

以下是小提琴链接：

问题是内部Div不可见，错误为“uncaughttypeerror:未能在“Node”上执行“appendChild”：参数1不是“Node”类型。

---

“由于是运行时，我无法找出问题所在

更好的解决方案：

var parser = new DOMParser()
var el = parser.parseFromString(innerDiv, "text/xml");
iDiv.appendChild(el.firstElementChild)

旧解决方案：

var parser = new DOMParser()
var el = parser.parseFromString(innerDiv, "text/xml");
iDiv.appendChild(el.firstElementChild)

不能以这种方式将inerDiv附加到iDiv。 你可以这样做： 改变

到

`iDiv.innerHTML += innerDiv`