javascript - 如果之前 DOM 元素中的部分旧内容达到了特定高度，则创建新的 DOM 元素

Question

更新:2016 年 12 月 27 日

1. 我确实更改了标题，因为每个 DOM 元素都可能是目标(实际上它是否是 <p> 元素并不重要)。

2. 我提供了一些有关我正在使用的内容以及我想要实现的目标的更多信息。也许有原生 Electron 方法可以实现这一点？或者库也可以帮助我？

产品:我将提取其中包含 XML 的 tgz 文件。这些 XML 将用于自动填充成品中的表格。之后，表格和段落将可编辑，用户可以向表格添加新行，也可以向页面添加新段落。

框架:我正在使用electron点燃整个事情。

后端: NodeJS 7.x.x利用 ES6 features

图书馆: jQuery , Bootstrap , Angular , Materialize , lodash , async , moment

<小时/>

请记住，我已经实现了所有产品需求。我最初的问题过去是，现在仍然是是否有一种更高效的方法来做到这一点:

我有一个 html 页面，其中可以有“n”个称为页面的容器。一个页面可以容纳多个<p>元素。这个<p>元素设置为 contenteditable="true" .

现在我正在尝试创建一个 JavaScript 函数，它使用如下内容检查单页高度:

// Set max container height to 10cm.
let containerMaxHeight = 377.95276 // 1 cm = 37.795276px;

if(containerElement.clientHeight > containerMaxHeight){
/**
 * do desired stuff.
 */
}

到目前为止一切都很简单。该函数正在获取 innerHTML <p>的当前正在编辑的元素，如果页面高度高于限制，则“将站点分解为新站点”。我想出了一个递归，它删除了旧的 <p> 中的单词(大多数时候是 1-3 个)元素并将它们插入到新创建的页面中 <p>元素，直到旧页面的最大高度设置为其最大值。

这是我的递归示例(简化)，它从 innerHTML 末尾删除单词像这样:

let lastWordToBeRemoved = oldParagraphElement.split("\\s+").pop();

// append old value to new <p>
newParagraphElement.innerHTML += lastWordToBeRemoved;

// remove last Word from old <p>
oldParagraphElement.innerHTML.slice(0, -lastWordToBeRemoved.length);

/**
* Recheck height of old page container if it is above the 
* maximum redo above code
*/

我从这个例子开始: https://delight-im.github.io/HTML-Sheets-of-Paper/ 正如您所看到的，如果您进行编辑，页面会变得越来越大。我已经用 JS 函数阻止了这种情况。

现在您已经了解我在做什么:是否有更高效和/或更优雅的方法来执行此操作？我非常想知道您将如何解决这个问题。

如果还有什么不清楚的地方请告诉我，我会更新我的答案。

提前谢谢您!

问候， 巨金

Answer 1

我认为您应该将另一个 p 元素插入到预期位置，而不是拆分单词。然后您可以轻松地将超出的段落移动到新页面中。例如

paragraphElement.innerHTML = paragraphElement.innerHTML.replace(lastWordToBeRemoved, '</p><p class="exceeding-paragraph">' + lastWordToBeRemoved);
newPage.insertBefore(oldPage.querySelector('.exceeding-paragraph'), newPage.firstElementChild);