将字符串作为元素插入到JavaScript的DOM？

Question

我有HTML的测试块，作为一个例子::

的HTML是一个字符串，而不是一个DOM元素，但我想看看是否有保险业监督的方式，或者可以使用的方法插入字符串作为DOM，所以它可以附加到DOM。

var test='<tr class="rowHeaders">'; 
test=test+'<td id="sTD" name="sTD" width="4%">test.php</td>' 
test=test+'<td width="2%"><input type="radio" name="tb" ></td>'; 
test=test+'<td id="tTD" name="tTD" width="2%">php</td>'; 
test=test+'<td width="2%"><input type="button" name="vv" ></td>'; 
test=test+'</tr>'; 


var scriptTBL=document.getElementById("scriptsT"); 

scriptTBL.children[0].appendChild(test); 

试图做这样的事情......

但“测试”是不是有效的节点或元素，所以我怎么能添加到元素？

我曾考虑过使用innerHtml，但可能已经存在DOM的表/ tbody的子项。

我一直在探索碎片，但这不是点击！

测试HTML具有TBL：

<table id="scriptsT" name="scriptsT" > 
    <tr> 
    . 
    . 

指针或想法，将不胜感激。

谢谢。

Answer 1

制作一个div（或span或其他）并加载您的片段与innerHTML。

var someDiv = document.createElement("div"); 
someDiv.innerHTML = "<tr .... "; 
someParentElement.appendChild(someDiv); 

Answer 2

你可以追加到innerHTML：

scriptTBL.tBodies[0].innerHTML += test; 

---

foo += bar是foo = foo + bar简写。您也可以通过这种方式简化您的HTML创建代码。使用test += 'html here';。

appendChild只接受DOM元素。

Answer 3

你可以做这样的事情：

var test = '<tr class="rowHeaders">'; 
test = test + '<td id="sTD" name="sTD" width="4%">test.php</td>' 
test = test + '<td width="2%"><input type="radio" name="tb" ></td>'; 
test = test + '<td id="tTD" name="tTD" width="2%">php</td>'; 
test = test + '<td width="2%"><input type="button" name="vv" ></td>'; 
test = test + '</tr>'; 

var discardableElement = document.createElement("div"); 
discardableElement.innerHtml = test; 

var scriptTBL = document.getElementById("scriptsT"); 
scriptTBL.tBodies[0].appendChild(discardableElement.firstChild); 

这是一个有点浪费，因为你正在创建一个DOM元素（这是一个昂贵的操作），只有放弃它，但它会创建DOM元素以允许您使用appendChild方法。

或者，你可以使用字符串串联使用innerHTML属性，像这样：

var test = '<tr class="rowHeaders">'; 
test = test + '<td id="sTD" name="sTD" width="4%">test.php</td>' 
test = test + '<td width="2%"><input type="radio" name="tb" ></td>'; 
test = test + '<td id="tTD" name="tTD" width="2%">php</td>'; 
test = test + '<td width="2%"><input type="button" name="vv" ></td>'; 
test = test + '</tr>'; 


var scriptTBL = document.getElementById("scriptsT"); 

// Insert at the BOTTOM of the table 
var newHtml = scriptTBL.innerHtml + test; 

// OR... Insert at the top of the table 
//var newHtml = test + scriptTBL.innerHtml; 

scriptTBL.tBodies[0].innerHtml = newHtml; 

编辑：更新的基础上@扎克的评论。