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);

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

但是“test”不是一个有效的节点或元素，所以如何将它添加到元素？

我考虑过使用innerHtml，但是DOM的表/ tbody可能已经存在一个子节点。

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

测试html有tbl：

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

非常感谢指针或想法。

谢谢。

Answer 1

您可以附加到innerHTML：

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

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

appendChild只接受DOM元素。

Answer 2

制作div（或span或其他）并使用innerHTML加载您的片段。

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

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;

编辑：根据@ Zach的评论更新。

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

3 个答案: