Question

我有一个使用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";

现在我有一个方法可以将＆＃34; div＆＃34; 元素返回给第一个创建的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";

这里有小提琴链接： https://jsfiddle.net/1988/5ff8dqbb/

问题是内部Div不可见，错误显示＆＃34; Uncaught TypeError：无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点＆＃39;。＆＃34; 由于它是运行时我无法弄清楚问题是什么

Answer 1

更好的解决方案：

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

旧解决方案：

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

`iDiv.appendChild(innerDiv);`

到

`iDiv.innerHTML += innerDiv`

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

1 个答案: