使用javascript插入HTML元素时显示“未定义”

Question

我正在创建一个google chrome扩展程序，该扩展程序尝试使用HTML将HTML元素插入网页。这是HTML在浏览器上的外观

如您所见，在“没有最近更新”下有一个字符串“ undefined”。我检查了html以查看此字符串的确切位置。这是html部分。

H3标签是我要插入的元素。它包括一个p标签，以及一个包含表的div。但是，在那个div中，“未定义”在那里，我不确定为什么。它位于table标记之前的div标记中，但是我在JavaScript代码的该区域中没有任何内容。

    chrome.storage.local.get("tr", function(key){
    var new_tr = "";
    var tr = key.tr;


    for (i=changes.length-1; i >= 0; i--){
        var td = "";
        for (j=0; j<changes[i].length; j++){
            td += "<td align='left'>"+changes[i][j]+"</td>";
        }
        new_tr ="<tr>"+td+"</tr>" + new_tr;
    }



    var historybox = document.createElement("h3");
    var tableHTML = "<div style='overflow-y: scroll; height: 200px;'><table><tr><td>Subject</td><td>Tri</td><td>Before</td><td>After</td><td>Change</td><td>Date Updated</td></tr>" + new_tr + tr + "</table></div>";
    if (changes.length == 0){
        tableHTML = "<p>No Recent Updates</p>" + tableHTML;
    } 

    historybox.innerHTML = tableHTML;

    var contentArea = document.getElementById("content-main");
    var box = contentArea.querySelector("h1");
    contentArea.insertBefore(box.cloneNode(true), box);
    contentArea.replaceChild(historybox, box);


    chrome.storage.local.set({'tr' : (new_tr+tr)})

});

这是我用来插入HTML的代码。如果我们看一下 var tableHTML = ... 的位置，则div和table标记之间绝对没有任何内容。是什么引起了这个问题

Answer 1

您没有提供从localStorage检索的内容，因此我不确定，但是您的tr变量似乎包含未定义的值（以及当您尝试插入时将其放入不包含<td>或<tr>的表中，因为<table>标记不能直接包含非表标记，所以它会撞到表外。）

// Guesses at your source data:
changes = [
  ["one", "two", "three"]
];

var new_tr = "";
var tr = undefined;

// your (unmodified) code below:

for (i = changes.length - 1; i >= 0; i--) {
  var td = "";
  for (j = 0; j < changes[i].length; j++) {
    td += "<td align='left'>" + changes[i][j] + "</td>";
  }
  new_tr = "<tr>" + td + "</tr>" + new_tr;
}

var historybox = document.createElement("h3");
var tableHTML = "<div style='overflow-y: scroll; height: 200px;'><table><tr><td>Subject</td><td>Tri</td><td>Before</td><td>After</td><td>Change</td><td>Date Updated</td></tr>" + new_tr + tr + "</table></div>";
if (changes.length == 0) {
  tableHTML = "<p>No Recent Updates</p>" + tableHTML;
}

historybox.innerHTML = tableHTML;

var contentArea = document.getElementById("content-main");
var box = contentArea.querySelector("h1");
contentArea.insertBefore(box.cloneNode(true), box);
contentArea.replaceChild(historybox, box);

<div id="content-main">
<h1>header</h1>
</div>