jQuery vs Javascript example
Question
I was reading w3schools and found this example:
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>length</b> property.</p>
<script type="text/javascript">
x=document.getElementsByTagName("p");
document.write("------<br />");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
document.write("------");
</script>
</body>
which works just fine. Then I thought doing the same with jQuery with
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
and then in the code.js file have
$(document).ready(function() {
x=document.getElementsByTagName("p");
document.write("------<br />");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
document.write("------");
});
But with the second example, using jQuery the page loads forever and never prints the p tags innerHTML values.
Why is this?
4 answers
solution1
3 ACCPTED 2011-06-04 22:45:18
calls to document.write after document.ready rewrites the document. and single the return value of document.getElementsByTagName is a live list the list becomes empty.
So what actually happens is that the document contains.
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>length</b> property.</p>
When the document is ready you call x = document.getElementsByTagName("p"); and x contains an array of <p> elements. But this is a live list and reflects the live state of the document. So when <p> elements get removed the list gets updated automatically.
You then call document.write with "-----<br/>" and this empties the document and replaces it with that. So the variable x now contains 0 <p> elements becuase there are 0 in the document.
The for loop doesn't run because x.length === 0
As mentioned this is broken because W3Schools gives you broken code.
I highly recommend you learn from the MDN
A better way to achieve this with jQuery would be:
$(document).ready(function() {
var ps = $("p");
var body = $(document.body);
body.append("------" + "<br/">);
ps.each(function() {
body.append(this.innerHTML + "<br/>");
}):
body.append("------");
});
solution2
3 2011-06-04 22:45:57
Don't use document.write after the DOM is loaded, as it is with jQuery's $(document).ready . In fact, don't use document.write with jQuery at all. Use DOM manipulation instead. For instance:
$(document).ready(function() {
var x = $('p'),
toAdd = '';
x.each(function() {
toAdd += this.innerHTML;
});
$(document.body).append(toAdd);
});
Basically, learn jQuery's paradigms and patterns, and use them. Don't expect to be able to drop jQuery syntax randomly into Javascript code. Moreover, don't listen to W3Schools.
solution3
2 2011-06-04 22:47:54
You should read about document.write from a proper resource :
Writing to a document that has already loaded without calling
document.open()will automatically perform adocument.opencall. Once you have finished writing, it is recommended to call document.close(), to tell the browser to finish loading the page.
As you are running the jQuery code on the document.ready event, the document (the structure) is already loaded. That means document.open is called. Lets see what MDC says about it :
If a document exists in the target, this method clears it (see the example above).
That means all the existing content is removed. Hence your code cannot access the p elements as they don't exist anymore.
Why does it work without jQuery?
In the original code, the JavaScript is executed before the structure finished loading (as it is part of it itself). Therefore document.open is not called and the content is not cleared:
If the
document.write()call is embedded directly in the HTML code, then it will not calldocument.open().
There is hardly ever a reason to use document.write . Use proper DOM manipulation methods instead if you want to modify the document. You can find a list of methods provided by jQuery here.
solution4
0 2011-06-04 23:01:03
that's because every time jQuery writes in the document you made some new elements so all scripts in the $(document).ready(); should be done again another time
maybe the solution is to write in another element like a "div"
$(document).ready(function() {
x=document.getElementsByTagName("p");
$('div.myDiv').html("------<br/>");
for (var i=0; i<x.length; i++)
{
$('div.myDiv').html(x[i].innerHTML());
$('div.myDiv').html("<br />");
}
$('div.myDiv').html("------");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.