aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/element/outerhtml/index.html
blob: c94b4a395d5b01f725cb08488d2ec0aef1455514 (plain)
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
---
title: Element.outerHTML
slug: Web/API/Element/outerHTML
translation_of: Web/API/Element/outerHTML
---
<p>{{APIRef("DOM")}}</p>

<h2 id="Summary" name="Summary">Resumen</h2>

<p>El atributo <code>outerHTML</code> del interfaz DOM {{ domxref("element") }} obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.</p>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML;
</pre>

<p>Al retorno, <code>content</code> contendrá el fragmento de HTML serializado que describe al elemento <code>element</code> y a sus descendientes.</p>

<pre class="eval"><em>element</em>.outerHTML = content;
</pre>

<p>Reemplaza el elemento por los nodos generados del análisis de la cadena <code>content</code> con el padre de <code>element</code> como el nodo de contexto para el algoritmo de procesado del fragmento.</p>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<p>Ontener el valor de la propiedas <code>outerHTML</code> de un elemento:</p>

<pre class="brush: js">// HTML:
// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;

d = document.getElementById("d");
dump(d.outerHTML);

// La cadena '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
// es volcada a la ventana de la consola.
</pre>

<p>Reemplazar un nodo mediante la asignación de la propiedad <code>outerHTML</code>:</p>

<pre class="brush: js">// HTML:
// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // logs "DIV"

d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
console.log(container.firstChild.nodeName); // logs "P"

// El div #d no será parte del árbol del documento,
// el nuevo párrafo lo reemplazará.
</pre>

<h2 id="Notas">Notas</h2>

<p>Si el elemento no tiene elemento padre, esto es, si es el elemento raíz del documento, la asignación de su propiedad <code>outerHTML</code> lanzará una <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> con el código de error <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por ejemplo:</p>

<pre class="brush: js">document.documentElement.outerHTML = "test";  // lanza una DOMException
</pre>

<p>Además, aunque el elemento es reemplazado en el documento, la variable cuya propiedad <code>outerHTML</code> fue asignada continuará conteniendo una referencia al elemento original:</p>

<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // muestra: "P"
p.outerHTML = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
console.log(p.nodeName); // sigue mostrando: "P";
</pre>

<h2 id="Specification" name="Specification">Especificación</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Observaciones</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
   <td>{{ Spec2('DOM Parsing') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

{{Compat("api.Element.outerHTML")}}

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>{{domxref("HTMLElement.outerText")}}</li>
 <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">Propiedad outerHTML</a></li>
</ul>