代码之家 › 专栏 › 技术社区 › Zachary Scott

JavaScript和DOM:为什么“<table>”+=“<tr><td></td></tr>”+=“</table”不起作用?

dom javascript

Zachary Scott · 技术社区 · 14 年前

在这两种情况下,字符串内容是相同的。如果这样做:

 myDiv.innerHTML += "<table><tr><td>A</td><td>B</td></tr></table>";

你得到一个有两列的表。

 myDiv.innerHTML += "<table>";
 myDiv.innerHTML += "<tr>";
 myDiv.innerHTML += "<td>A</td>";
 myDiv.innerHTML += "<td>B</td>";
 myDiv.innerHTML += "</tr>";
 myDiv.innerHTML += "</table>";

你只能得到 <table></table> 标签。不存在其他标记。

这是因为JavaScript将内容的含义更改为对象,然后我们不将TD添加到Table对象吗?为什么会这样?

3 回复 | 直到 14 年前

Quentin 14 年前

所以在第一步之后:

<table></table>

因为结束标记是通过错误恢复添加的。

然后你试着

<table></table><tr>

等等。

Josh Stodola 14 年前

不要像那样一遍又一遍地附加到innerHTML。如果不以完整的形式添加元素,您希望它如何正确地解析元素?你能猜一下吗?每次追加后,它都会自动解析结束标记,从而产生古怪的行为。我知道你想建立这样的字符串是为了可读性,那么这个呢。。。

var str = "";
str += "<table>";
str += "<tr>";
str += "<td>A</td>";
str += "<td>B</td>";
str += "</tr>";
str += "</table>";

myDiv.innerHTML += str;

Nick Craver 14 年前

每次当你设置 innerHTML ,您需要创建完成 (或者至少是有效的)一组DOM元素,当前您正在重复附加未关闭的标记,这将导致…一些古怪的行为。

你的测试结果并不总是 <table></table> 或者,它将取决于浏览器如何处理无效的标记…但在几乎所有情况下,您都可以预期一个无效的结果。

Here's a demo illustrating what the innerHTML is becoming as DOM elements are created .

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前