files/es/orphaned/web/api/childnode/replacewith/index.html


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

---
title: ChildNode.replaceWith()
slug: orphaned/Web/API/ChildNode/replaceWith
tags:
  - API
  - DOM
  - Experimental
  - Nodo
  - Referencia
  - metodo
translation_of: Web/API/ChildNode/replaceWith
original_slug: Web/API/ChildNode/replaceWith
---
<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br>
 <br>
 <span>El método <strong>ChildNode.replaceWith () </strong>reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></p>

<p> </p>

<h2 id="Síntasix">Síntasix</h2>

<p> </p>

<pre class="syntaxbox">[Throws, Unscopable]
void ChildNode.replaceWith((Node or DOMString)... nodes);
</pre>

<h3 id="Parámetros">Parámetros</h3>

<dl>
 <dt><code>nodos</code></dt>
 <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.</span></span></dd>
</dl>

<h3 id="Excepciones">Excepciones</h3>

<ul>
 <li><span id="result_box" lang="es"><span>{{Domxref ( "HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</span></span></li>
</ul>

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

<h3 id="Utilizando_replaceWith()">Utilizando <code>replaceWith()</code></h3>

<pre class="brush: js">var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");

child.replaceWith(span);

console.log(parent.outerHTML);
// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
</pre>

<h3 id="ChildNode.replaceWith()_es_unscopable"><code>ChildNode.replaceWith()</code> es unscopable</h3>

<p><span id="result_box" lang="es"><span>El método replaceWith () no está incluido en la declaracion <em><code>with</code>.</em></span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p>

<pre class="brush: js">with(node) {
  replaceWith("foo");
}
// ReferenceError: replaceWith is not defined </pre>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Definición Inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Función</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte Básico</td>
   <td>{{CompatChrome(54.0)}}</td>
   <td>{{CompatGeckoDesktop(49)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(39)}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Función</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Mobile</th>
  </tr>
  <tr>
   <td>Soporte Básico</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(54.0)}}</td>
   <td>{{CompatGeckoMobile(49)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOperaMobile(39)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(54.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Ver_También">Ver También</h2>

<ul>
 <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li>
 <li>{{domxref("Node.replaceChild()")}}</li>
 <li>{{domxref("NodeList")}}</li>
</ul>