Javascript - 静态 HTML 的 DOM 属性与动态生成的不同

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

4年前关闭。




Improve this question




我正在创建一个类似电子表格的应用程序，允许使用箭头键轻松导航。这需要我设置一个“指针”，它只是对某个 HTML 元素的引用。我通过加载两行开始页面，并为用户提供生成新行的选项。这些新行在生成时会接收事件监听器。

因此，如果您按下箭头键，指针应该会移动到相邻的单元格。我使用给定单元格(它所在的行)的父类的 childNodes 属性来定位相邻的单元格 + 使用 indexOf 来确定当前单元格的位置。所以向上移动意味着我需要转到 previous sibling 的父单元格，然后转到该 HTMLCollection 的相同索引。

但是，我从静态 HTML 生成的前两行与动态生成的行具有不同的属性。它们会自动从实际输入框之间的这些无用文本节点开始。结果，我不能只选择下一个 sibling ，我必须跳过两个 sibling 。但这与动态内容不同，因为当我动态生成它时，它没有这些文本节点(与图片相关)。

我会强制用户从一开始就动态生成它(而不是从 2 行开始)，但想法是在服务器端使用模板引擎来生成从数据库检索到的先前输入的数据，其行为方式应该相同作为硬编码的 HTML。因此，这些单元格的行为将与用户想要生成的新行不同，并且导航功能会中断。

有没有办法从 javascript 生成新的 HTML，以便它像静态 HTML 一样工作？

图 1:静态 HTML 的 DOM 属性

图 2:动态生成的 HTML 的 DOM 属性(文本节点通常根本不存在，但我尝试模仿静态 HTML 并尝试在输入单元格之间插入文本节点，但这不起作用)

Answer 1

静态生成的 HTML 中的文本节点将是您在每个标记之间生成的空格。该空白确实对您的 DOM 有影响，尽管影响很小。您 js 生成的 HTML 可能没有任何空格，这就是您的两个版本略有不同的原因。确保你的静态和动态 HTML 是相同的，包括空格，你应该很好。