Essa propriedade é usada para poder adicionar algum conteúdo no interior de algum elemento no documento como, por exemplo.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="paragraph"></p>
<script>
let p = document.querySelector("#paragraph");
p.innerHTML = "Esse é um parágrafo!";
</script>
</body>
</html>
Ou então algum elemento HTML como, listas.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="paragraph"></p>
<script>
let p = document.querySelector("#paragraph");
p.innerHTML = "<ul><li>Lista 1</li><li>Lista 2</li><li>Lista 3</li></ul>";
</script>
</body>
</html>
Mas, ao tentar inserir o elemento script
com algum código, simplesmente não funciona! caso na tag de fechamento incluir uma barra vai retornar erro.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
</head>
<body>
<p id="paragraph"></p>
<script>
let p = document.querySelector("#paragraph");
p.innerHTML = "<script>alert('Essa é uma caixa!')<script>";
</script>
</body>
</html>
Porque o script não é executado? seria por algum motivo de segurança?
outerHTML
. Ficaria assim:p.outerHTML = "<script>alert('Essa é uma caixa!')<\/script>";
substituiria no documento mas o script não seria executado. Para ser executado o script tem que ser adicionado ou pelo DOM ou então comdocument.write
porémdocument.write
implica na recarga do documento. Isso acontece porque o navegador impõe uma camada de isolamento entre componentes visuais e código, nada a ver com segurança.