Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Diferença entre innerHTML vs outerHTML

02-11-2007 17:52

A difença básica entre ambos pode ser facilmente entendida com esse exemplo:

<a href="#" onclick="alert(this.innerHTML)">innerHTML</a> <a href="#" onclick="alert(this.outerHTML)">outerHTML</a>

Clicando no primeiro link, será exibido: innerHTML
Isso porque o alert estará retornando o que o objeto contém, no caso seria o texto do href.

Clicando no segundo link, será exibido:

<a href="#" onclick="alert(this.outerHTML)">outerHTML</a>

Ou seja, todo o objeto clicado.

Veja nesse exemplo abaixo usando o innerHTML e o outerHTML:

<script type="text/javascript"> function troca_texto() { document.getElementById('conteudo').innerHTML='novo texto'; } function troca_div() { // só IE var nova_div = '<div style="border:1px solid #000000;">nova div</div>'; document.getElementById('conteudo').outerHTML=nova_div; } </script>


<div id="conteudo" style="border:1px solid #cccccc;">texto dentro da div</div>   <a href="javascript:troca_texto()">troca texto</a> <a href="javascript:troca_div()">troca div</a>

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado