将字符串作为元素插入 DOM 以获取 javascript？

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 的 table/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 的评论更新。