diff options
Diffstat (limited to 'files/es/web/api/htmlelement/innertext/index.html')
| -rw-r--r-- | files/es/web/api/htmlelement/innertext/index.html | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/files/es/web/api/htmlelement/innertext/index.html b/files/es/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..403f3c0bc1 --- /dev/null +++ b/files/es/web/api/htmlelement/innertext/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLElement.innerText +slug: Web/API/HTMLElement/innerText +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">The <code><strong>innerText</strong></code> property of the {{domxref("HTMLElement")}} interface represents the "rendered" text content of a node and its descendants.</span> 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.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <code>innerText</code> is easily confused with {{domxref("Node.textContent")}}, but there are important differences between the two. Basically, <code>innerText</code> is aware of the rendered appearance of text, while <code>textContent</code> is not.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">const <em>renderedText</em> = <em>htmlElement</em>.innerText +<em>htmlElement</em>.innerText = <em>string</em></pre> + +<h3 id="Value">Value</h3> + +<p>A {{domxref("DOMString")}} representing the rendered text content of an element. If the element itself is not <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">being rendered</a> (e.g detached from the document or is hidden from view), the returned value is the same as the {{domxref("Node.textContent")}} property.</p> + +<h2 id="Example">Example</h2> + +<p>This example compares <code>innerText</code> with {{domxref("Node.textContent")}}. Note how <code>innerText</code> is aware of things like {{htmlElement("br")}} elements, and ignores hidden elements.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><h3>Source element:</h3> +<p id="source"> + <style>#source { color: red; }</style> +Take a look at<br>how this text<br>is interpreted + below. + <span style="display:none">HIDDEN TEXT</span> +</p> +<h3>Result of textContent:</h3> +<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea> +<h3>Result of innerText:</h3> +<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const source = document.getElementById('source'); +const textContentOutput = document.getElementById('textContentOutput'); +const innerTextOutput = document.getElementById('innerTextOutput'); + +textContentOutput.innerHTML = source.textContent; +innerTextOutput.innerHTML = source.innerText;</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 700, 450)}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement.innerText")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> |