Javascript 如果以前DOM元素的部分旧内容达到特定高度，则创建新的DOM元素

更新日期：2016年12月27日

我确实更改了标题，因为每个DOM元素都可能是目标（实际上，它是否是

元素并不重要）

我已经提供了一些关于我正在使用什么以及我试图实现什么的更多信息。也许有一些天然的电子方法可以做到这一点？或者libs也能帮我吗

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

框架：我用它来启动整个程序

后端：使用

库：

---

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

我有一个html页面，它可以包含称为页面的“n”容器。一个页面可以包含多个

元素。此

元素设置为

contenteditable=“true”

现在，我尝试创建一个javascript函数，该函数使用如下内容检查单页高度：

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

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

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
*/

到目前为止一切都很容易。该函数用于获取当前正在编辑的

元素的

innerHTML

，并在页面高度超过限制时将“站点”拆分为新站点。我想出了一个递归方法，即删除旧

元素中的单词（大多数情况下是1-3），并将它们插入到新创建的带有

元素的页面中，直到旧页面的最大高度设置为其最大值

下面是我的递归（简化）示例，它从
innerHTML
的末尾删除单词，如下所示：

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

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

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
*/

让lastWordToBeRemoved=oldParagraphElement.split（“\\s+”）.pop（）；
//将旧值追加到新值
newParagraphElement.innerHTML+=lastWordToBeRemoved；
//从旧文档中删除最后一个单词
oldParagraphElement.innerHTML.slice（0，-lastWordToBeRemoved.length）；
/**
*重新检查旧页面容器的高度，如果它高于
*以上代码的最大重做次数
*/

我从这个例子开始：
正如你所看到的，如果你编辑页面，页面会越来越大。我已经用我的JS函数阻止了这一点

现在你已经知道我在做什么了：有没有更高效、更优雅的方法？我很想知道你将如何解决这个问题

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

提前谢谢你

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

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

paragraphElement.innerHTML=paragraphElement.innerHTML.replace（lastWordToBeRemoved，”
'+lastWordToBeRemoved）；
newPage.insertBefore（oldPage.querySelector（“.超出段落”）、newPage.firstElementChild；
我认为您应该在预期位置插入另一个
p
元素，而不是拆分单词。然后，您可以轻松地将超出的段落移动到新页面中。比如说

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

paragraphElement.innerHTML=paragraphElement.innerHTML.replace（lastWordToBeRemoved，”
'+lastWordToBeRemoved）；
newPage.insertBefore（oldPage.querySelector（“.超出段落”）、newPage.firstElementChild；
请注意，对于您来说，10cm可能是377.95276px，但这将区分每个屏幕/分辨率。我知道，这只是为了让ppl知道我为什么使用这个奇怪的值。然而，有没有一种方法可以告诉JS我想要10厘米而不考虑分辨率？答案为您提供了计算它的功能。非常感谢，这帮助了我=）。我认为这取决于。如果由于用户写了一些字母而超出了最大高度，您可能只需要移动几个单词。但是如果用户粘贴了一个大的文本，二进制搜索可能比逐字检查要好。请注意，对于您来说，10cm可能是377.95276px，但这将根据屏幕/分辨率进行区分。我知道，这只是让ppl了解我为什么使用这个奇怪的值。然而，有没有一种方法可以告诉JS我想要10厘米而不考虑分辨率？答案为您提供了计算它的功能。非常感谢，这帮助了我=）。我认为这取决于。如果由于用户写了一些字母而超出了最大高度，您可能只需要移动几个单词。但是如果用户粘贴了一个大文本，二进制搜索可能比逐字检查要好。谢谢你的回答。虽然替换是一种选择，但我如何在不分裂的情况下算出最后一句话？@Megajin您的解决方案很好。如果您仍然需要一个更快的，那么我建议您使用
String#slice
。例如
var lastWordToBeRemoved=paragraphContent.slice（paragraphContent.lastIndexOf（“”）+1）
谢谢！这对我回答你的问题有帮助。我在等待悬赏，也许我可以吸引一种新的方式来做这件事。至少我希望如此。如果没有其他答案（或者只是在某些方面重复），我会接受你的答案。谢谢你的回答。虽然替换是一种选择，但我如何在不分裂的情况下算出最后一句话？@Megajin您的解决方案很好。如果您仍然需要一个更快的，那么我建议您使用
String#slice
。例如
var lastWordToBeRemoved=paragraphContent.slice（paragraphContent.lastIndexOf（“”）+1）
谢谢！这帮助我为你的ans获得+1