Javascript - 静态HTML具有与动态生成的

Question

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

因此，如果您按箭头键，指针应移动到相邻的单元格。我使用给定单元格的父类（它所驻留的行）的childNodes属性来定位相邻的单元格+使用indexOf来确定当前单元格的位置。所以向上移动意味着我需要转到父级单元格之前的兄弟级别，然后转到该HTMLCollection的相同索引。

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

我会强制用户从头开始动态生成它（不用2行启动它们）但是想法是在服务器端使用模板引擎生成从数据库中检索的先前输入的数据，这应该表现得很好与硬编码HTML一样。因此，这些单元格的行为与用户想要生成的新行和导航功能中断的行为不同。

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

图1：静态HTML的DOM属性

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

Answer 1

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

Answer 2

您看到的文本节点是空格。如果你想摆脱静态HTML中的文本节点，你必须缩小它，以便没有新的行或空格，但我不建议这样做，因为在开发过程中很难处理。

要摆脱文本节点，您必须摆脱它们，然后将事件应用于每个节点。您可以通过多种方式完成此操作。

var removeTextNodes = array => [...array].filter(item => item.nodeType !== 3 );
// the array being your nodeList 
// removes all the textnodes and turns it into a real array using 
// spread operator 

removeTextNodes.forEach((cell) => cell.addEventListener('keypress', hightLightCell); 
// I would also recommend that you add a removeEventListener in your hightLightCell function as this could slow down your app 

或者您可以使用children选择器而不是childNodes，因为这不会在节点中包含空文本节点/空格。

var cells = document.querySelector('.parent-div').children; 
// this will get you a nodeList with no empty text nodes