Não o document.write
ou document.writeln
não estão em desuso, eu testei o script e ele não faz nada e também não apresenta erro algum. Então fiz assim:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Objeto String</title>
<script type="text/javascript" src="arquivo.js"></script>
</head>
<body>
<p>test</p>
</body>
</html>
arquivo.js:
var x = new String("Texto dentro de aspas é string");
document.writeln(x);
Apenas no IE11 aparece um erro:
HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.
Mas esse erro não é de Javascript e sim de HTML, quando usa document.write
antes do body sem uma tag valida para <head>
o IE automaticamente cria o <BODY>
, mas logo em seguida ele encontra outro <body>
(definido por você) e isso causa um conflito (irei explicar como evitar).
Provavelmente o erro:
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
É ocasionado por outro script e você fez alguma confusão (vou falar do erro InvalidStateError
a seguir).
O que são document.write
e document.writeln
O document.write
é usado pra "escrever" no documento, mas não pra manipular o DOM "dinamicamente" e nem de maneira assíncrona, isso quer dizer que se você executar document.write
dentro de <head>
assim:
<head>
<script>
document.write("Teste");
</script>
</head>
Seria o mesmo que escrever isso:
<head>
Teste
</head>
Ou seja isso não vai inserir dentro do BODY (aonde provavelmente é o seu objetivo), você só deve usar document.write
em head
se pretende inserir uma tag valida pra <head>
, por exemplo digamos que você quer inserir um javascript sem e prevenir o cache dele, você pode fazer assim:
<head>
<script>
var time = new Date().getTime();
document.write('<script src="file.js?_=' + time + '"></script>');
</script>
</head>
Ou então quer mostrar a data no título:
<head>
<script>
var minhaData = new Date();
document.write('<title>' + minhaData + '</title>');
</script>
</head>
São apenas exemplos e não que realmente você deve usar
O que importa é entender que dentro de <head>
só pode haver tags validas, mesmo que o conteúdo seja inserido por document.write
.
O document.writeln
é quase idêntico ao document.write
, a unica diferença é que ele gera uma quebra de linha no final da string inserida, seria quase o mesmo que:
document.write("Foo bar\n");
document.write
em eventos
O document.write
se usado em eventos como click
ou onload
não irá adicionar apenas conteudo, ele irá sobrescrever o <body></body>
existente, por exemplo:
document.getElementById("testar").onclick = function() {
document.write("Olá mundo!");
};
<p>test</p>
<button id="testar">Testar</button>
O document.write
fora de eventos e antes do documento ser processado não sobrescreve apenas insere, mas depois de processado ele necessita reconstruir a estrutura e pra isso precisa limpar primeiro todo <body>
, raramente você vai usar algo desta maneira (como no exemplo acima).
Como inserir conteúdo na página dinamicamente
Pra evitar limpar o body você tem várias opções, como .innerHTML
, .appendChild
, .insertBefore
Um exemplo com innerHTML
:
var conteudo = document.getElementById("conteudo");
document.getElementById("testar").onclick = function() {
conteudo.innerHTML = "Olá mundo! Data atual: " + (new Date());
};
<p>test</p>
<div id="conteudo"></div>
<button id="testar">Testar</button>
O erro InvalidStateError
Aparentemente esse problema ocorre em requisições Ajax, ou em certas manipulações DOM o qual o objeto "mudou" ou não existe, a situação é bem variante, mas um exemplo que o problema ocorre é quando tentamos setar um header no XMLHttpRequest
antes do .open
, isso apresenta o erro:
var xhr = new XMLHttpRequest();
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
Pra corrigir faça isto:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'pagina.html', true);
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
Recomendo que estude e aprenda como funciona eventos/callbacks, recomendo estas duas respostas:
XHTML e HTML5
Notei que o seu código usa XHTML, eu não vejo necessidade disso em páginas padrões ou básicas, a não ser que você vá trabalhar com alguma estrutura de XML dentro da estrutura do HTML, todavia recomendo começar a usar HTML5, ou se quiser ainda sim continuar usando o DTD STRICT então use o HTML4.01, na maior parte dos casos você não vai usar o XHTML.
Um exemplo de HTML4.01 com strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Teste</title>
</head>
<body>
<p>Olá mundo</p>
</body>
</html>
HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
</head>
<body>
<p>Olá mundo</p>
</body>
</html>
E pra validar o seu HTML você pode usar este link https://validator.w3.org
var x = "String é um texto dentro de aspas ";
, se estiver fazendo uma aplicação convencional.