Почему `HTMLelement.innerText` добавляет символ новой строки (\ n)?

Question

Я обнаружил странное поведение HTMLelement.innerText, которое не могу понять.Вот пример вопроса:

// HTML
<div>
    <article id="editor"></article>
</div>

// JavaScript
var editor = document.getElementById('editor');
console.log(editor.innerHTML); // prints "\n"

// From 3rd party libraries
var jqueryExample = jquery.parseHTML('<div><article></article></div>')[0];
console.log(jqueryExample.innerHTML); // prints ""

var angularjsExample = angular.element('<div><article></article></div>')[0];
console.log(angularjsExample.innerHTML); // prints ""

Как видите, когда я использую document.getElementById, элемент innerHTML имеет по какой-то причине \n.Однако, если я использую jquery.parseHTML или angular.element, он не добавляет \n и возвращает его как есть.

Интересно, если в HTML больше контента:

// HTML
<div>
    <article id="editor">
        <h1>Test</h1>
        <p>Foo</p>
    </article>
</div>

// JavaScript
var editor = document.getElementById('editor');
console.log(editor.innerText); // prints "Test\nFoo"

Но jquery.parseHTML и angular.element s innerText печатает TestFoo.Почему это ???

Answer 1

Из Документов: ¹

Свойство innerText интерфейса HTMLElement представляет «обработанный» текстсодержимое узла и его потомков.Как получатель, он приближает текст, который получит пользователь, если он выделит содержимое элемента курсором, а затем скопирует его в буфер обмена.

В моем браузере (Chrome 61) я вижуон вставляет две строки в строку:

var editor = document.getElementById('editor');
console.log(editor.innerText); // prints "Test\nFoo"
console.log(editor.innerText.length);
console.log(Array.from(editor.innerText))

<script src="//unpkg.com/angular/angular.js"></script>
<div>
    <article id="editor">
        <h1>Test</h1>
        <p>Foo</p>
    </article>
</div>

Answer 2

Не добавляет никаких новых строк.Он просто выводит содержимое «как есть».В первом случае выводится пустой символ, поэтому вы его не видите.Во втором случае появилось четыре новые строки (см. Ниже пример editor-2 о том, как выводить тот же контент, что и в одной строке).

var editor1 = document.getElementById('editor-1');
console.log('editor-1: [' + editor1.innerHTML + ']'); //-> "[]"

var editor2 = document.getElementById('editor-2');
console.log('editor-2: [' + editor2.innerHTML + ']'); //-> "[<h1>Test</h1><p>Foo</p>]"

<div>
  <article id="editor-1"></article>
  <article id="editor-2"><h1>Test</h1><p>Foo</p></article>
</div>

Answer 3

Это не проблема с getElementById (это просто метод для получения элемента).Вы делаете разные вещи.getElementById находит элемент, отображаемый браузером, угловой код jquery создает новый элемент, поэтому он может отличаться от первого элемента.

Answer 4

Даже если вы добавите li к этому элементу, этот элемент, который вы пытаетесь отобразить на console.log, все еще будет пустым.Потому что вы пытаетесь console.log innerHTML из этого элемента.Если вы попытаетесь использовать console.log (element.value), он покажет вам, что оно не определено, потому что значения нет.