1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: element.innerHTML
slug: Web/API/Element/innerHTML
tags:
- API
- DOM
- Gecko
- Propiedad
- Referencia
translation_of: Web/API/Element/innerHTML
---
<p>{{APIRef("DOM")}}</p>
<h2 id="Summary" name="Summary">Resumen</h2>
<p>La propiedad <strong><code>Element.innerHTML</code></strong> devuelve o establece la sintaxis HTML describiendo los descendientes del elemento.</p>
<p>Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.</p>
<div class="note"><strong>Nota: </strong>Si un nodo tiene un texto secundario que incluye los caracteres <code>(&), (<),</code> o <code>(>)</code>, <code>innerHTML</code> devuelve estos caracteres como &amp, &lt y &gt respectivamente. Use {{ domxref("Node.textContent") }} para conseguir una copia correcta del contenido de estos nodos de texto.</div>
<p>Para <strong>insertar el código HTML</strong> en el documento en lugar de cambiar el contenido de un elemento, use el método <a href="https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML">insertAdjacentHTML().</a></p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="syntaxbox"><em>const content</em> = <em>element</em>.innerHTML;
<em>element</em>.innerHTML = <em>htmlString</em>;</pre>
<h3 class="brush: js" id="Valor">Valor</h3>
<p>La variable constante <code>content</code> contiene un <a href="https://developer.mozilla.org/es/docs/Web/API/DOMString">DOMString</a> que contiene el código HTML serializado describiendo todos los descendientes de <code>element</code>. Cuando se establece el valor de innerHTML, <strong>se eliminan todos los descendientes de <code>element</code></strong>, analiza la cadena <code>htmString</code> y asigna los nodos resultantes como descendientes de <code>element</code>.</p>
<h3 id="Excepciones">Excepciones</h3>
<dl>
<dt><code>SyntaxError</code></dt>
<dd>Se intentó establecer el valor de <code>innerHTML</code> utilizando una cadena que no está formada correctamente en HTML</dd>
<dt><code>NoModificationAllowedError</code></dt>
<dd>Se intentó insertar el código HTML en un nodo cuyo elemento primario es <a href="https://developer.mozilla.org/es/docs/Web/API/Document">document</a>.</dd>
</dl>
<h2 id="Notes" name="Notes">Notas de uso</h2>
<p>La propiedad <code>innerHTML</code> de muchos tipos de elementos—incluyendo {{ HTMLElement("body") }} o {{ HTMLElement("html") }}—puede ser devuelta o establecida. Esta propiedad se puede usar para ver el código HTML de la página actual, incluida la que haya sido modificada dinámicamente:</p>
<h3 id="Devolver_la_sintaxis_HTML_de_un_elemento">Devolver la sintaxis HTML de un elemento</h3>
<p>Devolver el valor de <code>innerHTML</code><font><font>hace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento. </font><font>La cadena resultante es devuelta.</font></font></p>
<pre><em>const content</em><code> = </code><em>element</em>.innerHTML;
</pre>
<p>Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento.</p>
<h3 id="Reemplazar_el_contenido_de_un_elemento">Reemplazar el contenido de un elemento</h3>
<p>Esta propiedad proporciona una forma sencilla de cambiar completamente los contenidos de un elemento por contenido nuevo. Por ejemplo, los contenidos completos del cuerpo del documento se pueden borrar así:</p>
<pre class="brush: js">document.body.innerHTML = ""; // Reemplaza el contenido de <body> con una cadena vacía
</pre>
<p>El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "<code><</code>" con la entidad HTML "<code>&lt;</code>", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre"><pre></a>. Entonces el valor de innerHTML se cambia a esta nueva cadena. Como resultado, se muestra en pantalla el código fuente completo de la página.</p>
<pre><code>document.documentElement.innerHTML = "<pre>" +
document.documentElement.innerHTML.replace(/</g,"&lt;") +
"</pre>";</code>
</pre>
<div class="note">
<p>Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de <strong>texto multilinea (elemento <code>textarea</code>)</strong>, Internet Explorer <font><font>cambiará el valor de la propiedad <code>innerHTML</code> del </font></font><strong>elemento <code>textarea</code></strong><font><font>, mientras que los navegadores Gecko no lo hacen.</font></font></p>
</div>
<h3 id="Consideración_de_seguridad">Consideración de seguridad</h3>
<p>No es extraño que <code>innerHTML</code> sea usado para introducir texto en una página web. Esto añade un riesgo de seguridad.</p>
<pre class="brush: js">//ejemplo 1
var name = "Juan";
// asumiendo que 'el' es un elemento de HTML DOM
el.innerHTML = name; // sin peligro
// ...
//ejemplo 2
name = "<script>alert('Soy Juan con una alerta molesta!')</script>";
el.innerHTML = name; // fíjese que<span id="result_box" lang="es"> <span class="hps">el</span> <span class="hps">texto</span> <span class="hps">es molesto</span> <span class="hps">y no es realmente</span> <span class="hps">lo que se esperaba</span><span>.</span></span>
</pre>
<p>Aunque esto, el ejemplo 2, puede parecer un ataque <a class="external" href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site scripting</a>, <strong>el resultado es inofensivo</strong>, ya que HTML5 especifica que un tag <code><a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/script"><script></a> </code>insertado a través innerHTML <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">no debe ejecutarse</a>.</p>
<p>Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <code><script></code>, por lo que todavía hay un riesgo de seguridad cada vez que se utiliza <code>innerHTML</code> para establecer cadenas de texto sobre las que no tiene control. Por ejemplo:</p>
<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // con peligro, la alerta ahora si es mostrada</pre>
<p>Por esa razón, cuando solo tratamos con texto, es recomendable no usar <code>innerHTML</code>, sino <a href="/En/DOM/Node.textContent">Node.textContent</a>, que no interpretará la cadena pasada como HTML, sino como texto plano.</p>
<h2 id="Example" name="Example">Ejemplo</h2>
<pre class="brush: html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<div id="txt">
<p>primer parrafo hijo de div id="txt"</p>
<p>segundo parrafo hijo de id="txt" txt</p>
</div>
</body>
</html></pre>
<pre class="brush: js">txt = document.getElementById("txt");
console.log(txt.innerHTML);
/*
La siguiente cadena (string) se muestra en la ventana de la consola:
<p>primer parrafo hijo de div id="txt"</p>
<p>segundo parrafo hijo de id="txt" txt</p>
*/</pre>
<h2 id="Specification" name="Specification">Especificaciones</h2>
<ul>
<li>W3C's HTML 5 <code>innerHTML</code> para <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">documentos </a><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">HTML</a></li>
<li>W3C's HTML 5 <code>innerHTML</code> para <a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1">documentos </a><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1">XHTML</a></li>
</ul>
<h2 id="See_also" name="See_also">Ver también</h2>
<ul>
<li><code><a class="external" href="http://innerdom.sourceforge.net/">innerDOM</a></code> - Para aquellos que desean adherirse a los estándares, aquí hay un conjunto de funciones JavaScript que ofrecen serializar o analizar XML para así establecer contenidos de elementos definidos como cadena(s) via el DOM o para conseguir contenidos de elementos obtenidos del DOM como cadenas.</li>
<li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - Una solución más robusta (aunque más pesada) que innerDOM (soporta análisis con espacios de nombres, atributos entre comillas simples, secciones CDATA, etc) es este analizador SAX2 cuando se utiliza con su manejador de contenido DOM. (Ofrece String to DOM, DOM to string es <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString" title="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significativamente más fácil</a>)</li>
</ul>
<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 163px; top: 957px; opacity: 0.85;">
<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div>
<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div>
</div>
<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 503px; top: 778px; opacity: 0.15;">
<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div>
<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div>
<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div>
</div>
|
