javascript - 使用 document.createElement() 时“字符串包含无效字符”

Question

var NewRow = document.createElement("<tr><td align='left' valign='top'  width='9%;'  ><img width='32px' height='32px' src='images/" + ProfilePic + "'  /></td><td align='left' valign='Top' ><span class='MsgSpan'>" + Msg + "</span></td><td align='right' align='left' valign='top' style='color:Gray;' >" + Date + "</td></tr>");

我收到一个错误：

InvalidCharacterError: String contains an invalid character

我怎样才能解决这个问题？

Answer 1

您传递给的字符串document.createElement是元素的类型，例如tr.

如果你真的想把你的 HTML 组装成一个大字符串，我想你可以这样写：

var newRow = document.createElement('tr');
newRow.innerHTML = "<td align='left' valign='top'  width='9%;'  ><img width='32px' height='32px' src='images/" + ProfilePic + "'  /></td><td align='left' valign='Top' ><span class='MsgSpan'>" + Msg + "</span></td><td align='right' align='left' valign='top' style='color:Gray;' >" + Date + "</td>";

但对整个事情使用 DOM 操作可能更清洁/更快/更安全。

Answer 2

最近的答案会很好，我在下面有一个类似的答案：在这里，我已经定义了元素，以便于更改和调试。

var ProfilePic = "abl.jpg";
var Msg="Hi";
var Date = "June 10, 2010";
function doit() {
   var NewRow ="<tr><td align='left' valign='top'  width='9px'  ><img width='32px' height='32px' src='images/" + ProfilePic + "'  /></td><td align='left' valign='Top' ><span class='MsgSpan'>" + Msg + "</span></td><td align='right' align='left' valign='top' style='color:Gray;' >" + Date + "</td></tr>";
   var element = document.getElementById("tbl_body");
   element.innerHTML +=NewRow;
}

这对我来说就像魅力..

前面代码的问题是createElement您必须创建行，然后是td文本，然后是附加。

我希望这会做..

Answer 3

---

看一下这个：

使用内置 DOM 方法或原型从 HTML 字符串创建新的 DOM 元素

您不能将 HTML 字符串传递给 createElement 方法，而是使用上面链接中所示的 innerHTML 属性。

Answer 4

就我而言，在将 CSS 类添加到 div 时，我有一个额外的空间。

我有这个

menuLinksDiv.classList.remove('show-element ');

删除show-element字符串后的空格并且没有错误

menuLinksDiv.classList.remove('show-element');