From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/element/innerhtml/index.html | 148 +++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 files/pt-br/web/api/element/innerhtml/index.html (limited to 'files/pt-br/web/api/element/innerhtml') diff --git a/files/pt-br/web/api/element/innerhtml/index.html b/files/pt-br/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..f9ba30f9cf --- /dev/null +++ b/files/pt-br/web/api/element/innerhtml/index.html @@ -0,0 +1,148 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Gecko + - NeedsBrowserCompatibility + - Propriedade + - Referência(2) +translation_of: Web/API/Element/innerHTML +--- +

{{APIRef("DOM")}}

+ +

A propriedade Element.innerHTML define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.

+ +
Nota: Se um nó {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} tem um nó filho que inclui os caracteres (&), (<), ou (>), o innerHTML retornará esses caracteres como &amp, &lt e &gt respectivamente. Utilize {{domxref("Node.textContent")}} para recuperar uma cópia correta do conteúdo desses nós de texto.
+ +

Sintaxe

+ +
var content = element.innerHTML;
+ +

No retorno, content contém o código HTML serializado descrevendo todos os descendentes dos elementos.

+ +
 element.innerHTML = content;
+ +

Remove todos os elementos filhos, analisa o conteúdo da string e atribui os nós resultantes como filhos do elemento.

+ +

Exceptions

+ +
+
SyntaxError
+
Foi feita uma tentativa de definir o valor de um innerHTML usando uma string que não é HTML.
+
NoModificationAllowedError
+
Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um {{domxref("Document")}}.
+
+ +

Exemplo

+ +
<html>
+<head></head>
+<body>
+
+<div id="txt">
+  <script     id="txt0"> x=0 </script>
+    <noembed    id="txt1"> 1   </noembed>
+    <noframes   id="txt2"> 2   </noframes>
+    <noscript   id="txt3"> 3   </noscript>
+    <div        id="txt4"> 4   </div>
+    <div>
+      <noscript id="txt5"> 5   </noscript>
+    </div>
+    <span       id="txt6"> 6   </span>
+  </div>
+
+  <div id="innerHTMLtxt"></div>
+<div id="textContenttxt"><div>
+
+<script>
+for (i = 0; i < 7; i++) {
+    x = "txt" + i;
+    document.getElementById(x).firstChild.nodeValue = '&<>';
+}
+
+document.getElementById("innerHTMLtxt").textContent = document.getElementById("txt").innerHTML
+document.getElementById("textContenttxt").textContent = document.getElementById("txt").textContent
+</script>
+
+<body>
+</html>
+ +
// HTML:
+// <div id="d"><p>Content</p>
+// <p>Further Elaborated</p>
+// </div>
+
+const d = document.getElementById("d");
+dump(d.innerHTML);
+
+//  a string "<p>Content</p><p>Further Elaborated</p>"
+// é exibida na janela do console
+
+ +

Notas

+ +

Essa propriedade fornece uma forma simples de trocar completamente o conteúdo de um elemento. Por exemplo, o conteúdo inteiro do elemento body pode ser excluído ao fazer:

+ +
// Troca o conteúdo de body por uma string vazia.
+document.body.innerHTML = "";
+ +

A propriedade innerHTML de vários tipos de elementos — incluindo {{HTMLElement("body")}} ou {{HTMLElement("html")}} — pode ser retornada ou trocada. Essa também pode ser usada para ver o código fonte de uma página que foi modificada dinamicamente:

+ +
// Copie e cole este código, em uma única linha, na barra de endereços
+javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";
+
+ +

Essa propriedade foi implementada inicialmente pelos navegadores web, e então especificada pela WHATWG e W3C no HTML5. Implementações antigas talvez não tenham implementado-a exatamente da mesma forma. Por exemplo, quando um texto é inserido em uma caixa de texto, o Internet Explorer muda o valor do atributo innerHTML dessa entrada, mas os navegadores Gecko não.

+ +

Considerações de segurança

+ +

Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.

+ +
var name = "John";
+
+// presumindo que el é um elemento DOM HTML
+el.innerHTML = name; // inofensivo, nesse caso
+
+// ...
+
+name = "<script>alert('I am John in an annoying alert!')</script>";
+el.innerHTML = name; // inofensivo, nesse caso
+ +

Embora isso talvez se pareça como um ataque  {{interwiki("wikipedia", "cross-site scripting")}}, o resultado é inofensivo. O HTML5 especifica que uma tag {{HTMLElement("script")}}, inserida via innerHTML, não deve ser executada.

+ +

No entanto, há formas de se executar JavaScript sem usar elementos {{HTMLElement("script")}}, por isso ainda há um risco de segurança sempre que você usa innerHTML para definir uma string sobre a qual você não tem controle. Por exemplo:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // exibe uma caixa de alerta
+ +

Por essa razão, recomenda-se que você não use o innerHTML quando estiver inserindo texto puro; como alternativa, utilize {{domxref("node.textContent")}}. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.

+ +

Especificação

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}{{ Spec2('DOM Parsing') }}Definição inicial
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf