Question

简而言之，为什么后面的函数不适用于以下函数？

工作代码

function createRawRowElementViaInnnerHTML(){
  var row = document.createElement("tr");
  row.innerHTML = '<td>'+createDropDownHTML()+'</td>'+
    '<td>'+createTxtAreaDownHTML()+'</td>';
  return row;
}

非工作代码

function createRowElement(){
  var row = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML="Col 1 innerHTML -- should be overwritten";
  td1.innerHMTL=createDropDownHTML();
  var td2 = document.createElement("td");
  td2.innerHTML="Col 2 innerHTML -- should be overwritten";
  td2.innerHMTL=createTxtAreaDownHTML();
  row.appendChild(td1);
  row.appendChild(td2);
  return row;
}

我希望创建<td>元素并设置其.innerHTML与使用表格单元格的内部html（例如'<td>'+createDropDownHTML()+'</td>'）进行硬编码相同。＆＃34;非工作代码＆＃34;生成具有两个<tr>元素的<td>元素，但那些<td>元素内容为空（出于演示目的，我将其innerHTML设置为显示它们已正确创建）。在FF32和Chrome37上均观察到行为。

请参阅this fiddle了解剩余代码（例如函数调用）。此外，我试图使用新的堆栈溢出代码片段，这是可以在小提琴上找到的相同代码。

＆＃13;

for(var i =0; i<5;i++){
    var r = createRowElement();
    document.getElementById("myTable").appendChild(r);
    var r2 = createRawRowElementViaInnnerHTML();
    document.getElementById("myTable").appendChild(r2);
}

function createRawRowElementViaInnnerHTML(){
    var row = document.createElement("tr");
    row.innerHTML = '<td>'+createDropDownHTML()+'</td>'+
    '<td>'+createTxtAreaDownHTML()+'</td>';
    return row;
}
function createRowElement(){
    var row = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML="Col 1 innerHTML -- should be overwritten";
    td1.innerHMTL=createDropDownHTML();
    var td2 = document.createElement("td");
    td2.innerHTML="Col 2 innerHTML -- should be overwritten";
    td2.innerHMTL=createTxtAreaDownHTML();
    row.appendChild(td1);
    row.appendChild(td2);
    return row;
}
function createDropDownHTML(){
    return '<select><option>1</option><option>2</option><option>3</option></select>';
}
function createTxtAreaDownHTML(){
    return '<textarea></textarea>';
}

＆＃13;

<table id="myTable"></table>

＆＃13;

任何想法？来自谷歌搜索的大多数帖子都与dom没有准备好有关，这不是这里的情况。还阅读了一篇关于某种形式的潜在html验证/清理的帖子，但我不明白为什么它以一种方式而不是另一种方式工作，因为在某种程度上我使用.innerHTML这两种功能。寻找文档/资源的答案，为什么后者的功能不起作用。谢谢你的时间。

Answer 1

function createRowElement(){
  var row = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML="Col 1 innerHTML -- should be overwritten";
  td1.innerHMTL=createDropDownHTML();  // should be HTML instead of HMTL
  var td2 = document.createElement("td"); 
  td2.innerHTML="Col 2 innerHTML -- should be overwritten";
  td2.innerHMTL=createTxtAreaDownHTML(); // should be HTML instead of HMTL
  row.appendChild(td1);
  row.appendChild(td2);
  return row;
}

如上面的评论所示，您应该将这些行更改为：

// ...
td1.innerHTML = createDropDownHTML();
// ...
td2.innerHTML = createTxtAreaDownHTML();

在这些情况下，通常是拼写和案件的问题。所有你需要做的就是敏锐的眼睛。 HTML中的M和T将在您的代码中切换。

当从函数返回内容时，在新创建的TD元素上设置.innerHTML

1 个答案: