---
title: Element.outerHTML
slug: Web/API/Element/outerHTML
translation_of: Web/API/Element/outerHTML
---
<p>{{APIRef("DOM")}}</p>

<h2 id="Summary" name="Summary">Sumário</h2>

<p>O atributo <code>outerHTML</code> da estrutura DOM(Document object model) obtem  um fragmento serializado de código HTML descrevendo o elemento incluindo seus descendentes. É possível substituir o elemento em questão com nós obtidos através da análise de uma string.</p>

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

<p><em>var conteudo</em> = <em>elemento</em>.outerHTML;</p>

<p>Na atribuição, <em>conteudo</em> armazena o fragmento de código HTML que descreve o elemento e seus descentes.</p>

<pre class="eval"><em>elemento</em>.outerHTML = conteudo;
</pre>

<p><code>Atribui a <em>elemento</em></code>  os nós obtidos pela análise da  string <code>conteudo</code>, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.</p>

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

<p>Obtendo o valor da propriedade outerHtml de um elemento :</p>

<pre class="brush: js">// HTML:
// &lt;div id="d"&gt;&lt;p&gt;Conteúdo&lt;/p&gt;&lt;p&gt;Parágrafo&lt;/p&gt;&lt;/div&gt;

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

// A string '&lt;div id="d"&gt;&lt;p&gt;Conteúdo&lt;/p&gt;&lt;p&gt;Parágrafo&lt;/p&gt;&lt;/div&gt;'
// é mostrada na janela do console.
</pre>

<p>Substituindo um nó atribuindo- lhe a propriedade outerHTML</p>

<pre class="brush: js">// HTML:
// &lt;div id="container"&gt;&lt;div id="d"&gt;Isto é uma div.&lt;/div&gt;&lt;/div&gt;

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

d.outerHTML = "&lt;p&gt;Este parágrafo substitui a div original&lt;/p&gt;";
console.log(container.firstChild.nodeName); // mostra "P"

// A div #d não faz mais parte da estrutura do documento,
// O novo parágrafo a substituiu.
</pre>

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

<p>Se o elemento não tiver um nó pai, ou seja se o nó é a raiz do documento, tentar alterar sua propriedade outerHTML irá lançar um  <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> com o código de erro <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por exemplo:</p>

<pre class="brush: js">document.documentElement.outerHTML = "test";  // Irá lançar uma DOMException
</pre>

<p>inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade <code>outerHTML</code> foi atribuída ainda irá conter uma referência para o elemento original.</p>

<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // mostra: "P"
p.outerHTML = "&lt;div&gt;Esta div substituiu o parágrafo.&lt;/div&gt;";
console.log(p.nodeName); // ainda contém "P";
</pre>

<h2 id="Specification" name="Specification">Especificação</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('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
   <td>{{ Spec2('DOM Parsing') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatGeckoDesktop("11") }}</td>
   <td>0.2</td>
   <td>4.0</td>
   <td>7</td>
   <td>1.3</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>
    <p>Suporte básico</p>
   </td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoMobile("11") }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</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">outerHTML Property</a> </li>
</ul>