javascript - 使用 Javascript 使用 createDocumentFragment 添加长 html

Question

我想用 Javascript 添加大量 html，当我尝试添加 <td> 时出现问题之后一切正常:

这是我的 HTML:

<tr class='vis_par' id='row_wa' value="2"></tr>

这是我的脚本:

var sec_nom='wa';
document.querySelector(".vis_par[value=2]").appendChild(createFragment(" 
<td> <img src='"+sec_nom+".png' alt=''> </td>
<td> <input class='num_vo' id='vo_"+sec_nom+"_val' type='text' size=7> </td> 
<td> </td> 
<td> <input class='num_vo' id='vo_"+sec_nom+"_imp' type='text' size=7> </td> "));

function createFragment(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

我期望这个结果:

<tr class='vis_par' id='row_wa' value="2">
  <td><img src='wa.png'></td>
  <td><input class='num_vo' id='vo_wa_val' type='text' size=7></td>
  <td> </td>
  <td><input class='num_vo' id='vo_wa_imp' type='text' size=7></td>
</tr>

但是我有这个:

<tr class='vis_par' id='row_wa' value="2">
  <img src='wa.png'>
  <input class='num_vo' id='vo_wa_val' type='text' size=7>
  <input class='num_vo' id='vo_wa_imp' type='text' size=7>
</tr>

我不知道我的<td>在哪里!!

Answer 1

您需要在选择器 ".vis_par[value='2']" 中引用 2 。可以使用 .innerHTML

简化流程

var sec_nom = 'wa';
document.querySelector(".vis_par[value='2']").innerHTML =
  "<td> <img src='" + sec_nom + ".png' alt=''> </td>" 
  + "<td> <input class='num_vo' id='vo_" + sec_nom + "_val' type='text' size=7> </td>"
  + "<td> </td>" 
  + "<td> <input class='num_vo' id='vo_" + sec_nom + "_imp' type='text' size=7> </td>";

<table>
 <tbody>
  <tr class='vis_par' id='row_wa' value="2"></tr>
 </tbody>
</table>