javascript - 如何在 P 中将多个文本节点作为多行获取

Question

我正在尝试重现像Disqus评论框这样的内容可编辑的 div。

他们使用一个 contenteditable div，<p>里面只有一个。<p>设置为white-space: pre-wrap。

在 Chrome 上检查时，他们<p>的多行标签如下所示：

Disqus 示例（转到此链接的评论部分并检查评论框）

经过一番研究，我发现双引号表示多个文本节点，所以我尝试了：

const text1 = document.createTextNode('123');
    const text2 = document.createTextNode('456');
    const text3 = document.createTextNode('789');

    root.childNodes[0].appendChild(text1);
    root.childNodes[0].appendChild(text2);
    root.childNodes[0].appendChild(text3);

现在我明白了，这在检查时是相似的，但它们显示为单行而不是多行：

带有示例的片段

如何在多行中获得“123”“456”“789”？

const root = document.getElementById('root');
const p = document.getElementById('p1');

const text1 = document.createTextNode('123');
const text2 = document.createTextNode('456');
const text3 = document.createTextNode('789');

function handleClick() {
  p.appendChild(text1);
  p.appendChild(text2);
  p.appendChild(text3);
}

#root {
  border: 1px dotted blue;
  white-space: pre-wrap;
}

<div id="root" contenteditable="true" onClick>
<p id="p1">a</p>
</div>
<button onclick="handleClick()">Click</button>

标签： javascripthtml

Answer 1

在每个 TextNode 的末尾添加换行符。下面的代码应该可以工作。

const lineBreak='\n';

const root = document.getElementById('root');
const p = document.getElementById('p1');

const text1 = document.createTextNode('123') + lineBreak;
const text2 = document.createTextNode('456') + lineBreak;
const text3 = document.createTextNode('789') + lineBreak;

function handleClick() {
  p.appendChild(text1);
  p.appendChild(text2);
  p.appendChild(text3);
}