Блог

Главная - Вопросы по программированию - Как получить несколько текстовых узлов в виде нескольких строк внутри P

Как получить несколько текстовых узлов в виде нескольких строк внутри P

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь воспроизвести редактируемый div, подобный окну комментариев Disqus.

Они используют contenteditable div с одним <p> внутри него. <p> Устанавливается с white-space: pre-wrap .

Их <p> тег с несколькими строками выглядит следующим образом при проверке в Chrome:

Многострочный p 1

Например, 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>

Комментарии:

1. Вы можете использовать p.appendChild(document.createElement('br')) после каждого TextNode для вставки новых строк.

2. Спасибо. Это работает до разделения строк. Но он показывает <br> тег между текстовыми узлами. Как вы объясните Disqus? Это показывает text узлы только при проверке и отображает несколько строк?

Ответ №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);
}