如何在P

Question

我正在尝试重现可编辑内容的div，例如Disqus注释框。

他们使用内容可编辑的div，其中包含单个<p>。 <p>设置为white-space: pre-wrap。

在Chrome上检查时，带有多行的<p>标签看起来像这样：

Disqus Exemple (go to comments section on this link and inspect the comment box)

经过研究，我发现双引号表示多个文本节点，因此我尝试：

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>

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);
}