in my html:
<head>
<link href="/prop-view.css" media="screen" rel="stylesheet" type="text/css">
<script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="/prop-view.js" type="text/javascript"></script>
in my prop-view.js file:
$j("<div class='dk-logo'></div>").appendTo("body");
The inspector shows no errors. But the image doesn't show up. It does, however, when I copy and paste that line into the console. So... my guess is the js file is running before the document is fully loaded?
in my html:
<head>
<link href="/prop-view.css" media="screen" rel="stylesheet" type="text/css">
<script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="/prop-view.js" type="text/javascript"></script>
in my prop-view.js file:
$j("<div class='dk-logo'></div>").appendTo("body");
The inspector shows no errors. But the image doesn't show up. It does, however, when I copy and paste that line into the console. So... my guess is the js file is running before the document is fully loaded?
Share Improve this question asked Aug 26, 2010 at 14:07 NullVoxPopuliNullVoxPopuli 65.2k76 gold badges214 silver badges361 bronze badges3 Answers
Reset to default 5Make sure the DOM is loaded first by doing this:
$j(function() {
$j("<div class='dk-logo'></div>").appendTo("body");
});
This is a shortcut for jQuery's ready() function. The code inside is not executed until the <body> tag is fully loaded.
Because you were placing the code before the <body> tag, there was no <body> yet to which to append.
You're right. Execute your code on DOM ready.
$j(document).ready(function(){
$j("<div class='dk-logo'></div>").appendTo("body");
});
When prop-view.js is executed, the body is not yet available. Just attach the script-tags at the bottom of the body-tag. The page loads faster and the script will run as expected
<body>
...
<script ...></script>
</body>