为什么 `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，它会按原样添加 returns。

如果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 的 innerText 打印 TestFoo。这是为什么？？？

Answer 1

即使您向该元素添加了一些 li，您尝试添加的那个元素 console.log 仍然是空的。因为您正在尝试从该元素 console.log innerHTML 。如果你尝试 console.log(element.value) 它会告诉你这是未定义的，因为没有价值。

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 找到浏览器呈现的元素，angular jquery 代码正在创建一个新元素，因此它可能与第一个元素不同。

Answer 4

来自文档：¹

The innerText property of the HTMLElement interface represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

在我的浏览器 (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>

为什么 `HTMLelement.innerText` 添加换行符 (\n)？

Why `HTMLelement.innerText` adds newline (\n)?

javascript

jquery

element

getelementbyid

angularjs