A propriedade OuterHtml em JavaScript

Às vezes, os desenvolvedores precisam substituir o código-fonte de um elemento pelo texto formatado em HTML ou acessar o código-fonte de um elemento em tempo de execução. Para esse fim, utilize a propriedade OuterHtml que é semelhante ao elemento.Innerhtml. A principal diferença entre essas duas propriedades é que o Innerhtml acesse o conteúdo de texto simples de um elemento sem tags html, enquanto a propriedade OuterHtml deve ser usada se você precisar de tags html.

Este estudo explicará a propriedade OuterHtml em JavaScript.

Qual é a propriedade OuterHtml em JavaScript?

O "externo”É a propriedade JavaScript da interface DOM que fornece o componente HTML do elemento. Junto com o texto, ele também compreende a estrutura HTML completa do elemento, incluindo suas tags de abertura e fechamento. Além disso, usando a propriedade OuterHtml, você pode acessar ou modificar a estrutura HTML do elemento.

Como usar a propriedade OuterHtml em JavaScript?

Siga a sintaxe dada para obter o conteúdo HTML usando a propriedade OuterHtml:

elemento.externo

A sintaxe a seguir é usada para definir o conteúdo HTML usando a propriedade OuterHtml:

elemento.ExterHtml = htmlString;

Exemplo 1: Obtenha a estrutura HTML usando a propriedade OuterHtml

No exemplo seguinte, obteremos o conteúdo do elemento usando a propriedade OuterHtml. Aqui, primeiro criaremos um “div”Elemento usando tag html e atribua um id“div”Que contém vários elementos, incluindo um título, rótulo e botão. Há um evento OnClick anexado ao botão, que invocará a função definida chamada “getContentByouterHtml ()”Para mostrar a estrutura completa do elemento HTML:

Bem -vindo ao = "cor: vermelho"> linuxhint.

É o melhor = "cor: verde"> site Para aprender e polir sua = "cor: verde"> habilidades!


Clique aqui!

Em seguida, defina o “getContentByouterHtml ()”Função que será acionada no“ONCLICKEvento. Ele mostrará o conteúdo do elemento da div, incluindo todas as tags. Na função, primeiro passaremos o “div”Id do contêiner para o“getElementById ()”Método como argumento, então, mostre o conteúdo do elemento no método alert () chamando a propriedade OuterHtml:

função getContentByouterhtml ()
var getCont = documento.getElementById ("div");
alerta ("externo html: \ n" + getCont.externo);

A saída mostra a estrutura completa do elemento, incluindo seus elementos filhos:

Exemplo 2: defina e obtenha a estrutura HTML usando a propriedade OuterHtml

Neste exemplo, definiremos algum conteúdo no DOM usando a propriedade JavaScript OuterHtml e depois obteremos a estrutura completa do elemento especificado.

Aqui, criaremos dois botões, um é “Definir!"Que vai acionar o"setouterhtml ()”Função em um“ONCLICK”Evento e define algum conteúdo no DOM, e o segundo botão é“Pegar”Isso obterá a estrutura completa do elemento, acionando o“getContentByouterHtml ()”Função:

Defina e obtenha o conteúdo como ExterHtml:

Definir!
Pegar

No arquivo JavaScript, defina duas funções, o ““setouterhtml ()" e a "getContentByouterHtml ()”. Na função setouterhtml (), defina o conteúdo com

Tag usando a sintaxe da propriedade Set OuterHtml como um elemento filho do elemento:

função setouterhtml ()
var setCont = documento.getElementById ("set");
setCont.Outerhtml = "

É o melhor site para aprender e polir suas habilidades!

";

Então, na função getContentByouterHtml (), obtenha a estrutura completa do elemento usando a sintaxe da propriedade Get OuterHtml:

função getContentByouterhtml ()
var getCont = documento.getElementById ("div");
Alerta (getCont.externo);

Saída

Cobrimos todas as informações essenciais sobre a propriedade ExterHtml JavaScript.

Conclusão

O "externo”É a propriedade JavaScript da interface DOM que fornece a estrutura HTML completa do elemento, incluindo suas tags de abertura e fechamento. É semelhante à propriedade Innerhtml, mas a diferença entre eles é que o Innerhtml Access Acessu. Neste estudo, explicamos a propriedade OuterHtml em JavaScript.