Menu
When the code below is loaded into a browser, the DOM gets built incorrectly. Specifically, the final }); text node does not appear inside the code element it belongs to, but rather as a sibling within the p element. I can fix it by simply changing the class name of the innermost code elements from “new” to “new2”, or by removing them altogether. This indicates to me that there must be some kind of limit on nesting tags of the same class, but I can`t find a reference to this phenomenon anywhere else.
Can anyone out there shed any light on this?
[CODE]<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<style type=”text/css”>
code.first {
margin-left:20px;
margin-top:10pt;
margin-bottom:10pt;
font-size: inherit;
display:block;
}
code.new {
margin-left:30px;
display:block;
}
</style>
</head>
<body>
<p>The JavaScript code below is from the |ajaxTime.html| example. Take a moment to read it over and try to understand it.
<code class=’first’>
$(document).ready( function() {
<code class=’new’>
var launchAjax = function() {
<code class=’new’>
$.get(
<code class=’new’>
“servers/timeServer.php”,
<br>{
<code class=”new”>
timezone: $(“[name=timezone]”).val(),
<br>request: $(“[name=type]”).val(),
<br>delay: $(“[name=delay]”).val(),
</code>
},
<br>function(data, textStatus, jqXHR) {
<code class=”new”>
$(“#result”).html(data);
</code>
};
</code>
)};
</code>
$(“#ajaxButton”).click(launchAjax);
</code>
});
</code>
</p>
</body>
</html>