Not the document.write or document.writeln are not deprecated, I have tried the script and it does nothing and it does not show any error. So I did like this:
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>
file.js:
var x = new String("Texto dentro de aspas é string");
document.writeln(x);
Only in IE11 an error appears:
HTML1514: Extra "< body >" tag found. Only one "< body >" tag should exist per document.
But this error is not Javascript but HTML, when using document.write before the body without a valid tag for <head> IE automatically creates <BODY> , but soon after it finds another <body> (defined by you) and this causes a conflict (I'll explain how to avoid it).
Probably the error:
InvalidStateError: An attempt was made to use an object that is not, or no longer, usable
It is caused by another script and you have made some confusion (I will mention the error InvalidStateError below).
What are document.write and document.writeln
The document.write is used to "write" in the document, but not to manipulate the DOM "dynamically" or even asynchronously, this means that if you execute document.write within <head> like this: p>
<head>
<script>
document.write("Teste");
</script>
</head>
It would be the same as writing this:
<head>
Teste
</head>
In other words, this will not insert into BODY (where it is probably your goal), you should only use document.write in head if you want to insert a valid tag to <head> , say say you want to insert a javascript without and prevent caching it, you can do so:
<head>
<script>
var time = new Date().getTime();
document.write('<script src="file.js?_=' + time + '"></script>');
</script>
</head>
Or you want to show the date in the title:
<head>
<script>
var minhaData = new Date();
document.write('<title>' + minhaData + '</title>');
</script>
</head>
Just examples and not really what you should use
What matters is to understand that within <head> there can only be valid tags, even if the content is inserted by document.write .
The document.writeln is almost identical to document.write , the only difference is that it generates a line break at the end of the inserted string, it would be almost the same as:
document.write("Foo bar\n");
document.write in events
The document.write if used in events such as click or onload will not only add content, it will overwrite existing <body></body> , for example:
document.getElementById("testar").onclick = function() {
document.write("Olá mundo!");
};
<p>test</p>
<button id="testar">Testar</button>
The document.write out of events and before the document is processed does not overwrite it just inserts, but after processing it needs to rebuild the structure and for this it needs to first clean all <body> , rarely will you use something this way in the example above).
How to insert content into the page dynamically
To avoid cleaning the body you have several options, such as .innerHTML , .appendChild , .insertBefore
An example with 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>
The InvalidStateError error
It seems that this problem occurs in Ajax requests, or in certain DOM manipulations that the object "has changed" or does not exist, the situation is very variant, but an example that the problem occurs is when we try to set a header in% before XMLHttpRequest , this displays the error:
var xhr = new XMLHttpRequest();
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
To fix it do this:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'pagina.html', true);
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
I recommend that you study and learn how events / callbacks work, I recommend these two answers:
XHTML and HTML5
I noticed that your code uses XHTML, I do not see any need for this in standard or basic pages, unless you work with some XML structure inside the HTML structure, however I recommend starting HTML5, or if you want but still continue using the DTD STRICT then use HTML4.01, in most cases you will not use XHTML.
An example of HTML4.01 with 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>
And to validate your HTML you can use this link link
