Mayo Mayo - 1 year ago 32
jQuery Question

DOM elements and the order in which javascript reads them

OVERVIEW: I'm creating DOM elements via javascript and then trying to access them. The problem is that they don't exist in the DOM (or that's the way I read it.)

function init(){

window.onload = init;

In pagination I make create a DOM element called "more"

var more='<div id="more" class="box move"> > </div>';

This, along with all the other elements are displayed in the "Elements" section of the console log. Sweet. It's in the DOM isn't it (no).

I tried to call this div with jQuery but was unable to. I checked to see it existed. It does not.


I made a dummy div in the html to see if jQuery was actually working. I checked it's length and yup it was there.

console.log($("#aaa").length); // returns 1
console.log($("#more").length); // returns 0

The question is: what is the best way to have jQuery read these DOM elements?

Does my
solution clash with jQuery's

The code is as follows

function initFunction1(){ ...}
function initFunction2(){ ...}

function init(){

window.onload = init;


}); // END jQuery


<!doctype html>
<meta charset="utf-8">
<link rel ="stylesheet" href="pagination3.css">

<script src=""></script>
<div id="aaa">aaa</div>
<div id="pagination"></div>

<script src="pagination.js"></script>

// pagination.js below

function pagination(){
var myPagination=document.getElementById("pagination");
var myDivStart='<div class="box">';
var myDivEnd='</div>';
/* */
var first='<div id="first" class="box move"> FIRST </div>';
var last='<div id="last" class="box move"> LAST </div>';
var less='<div id="less1" class="box move"> < </div>';
var less10='<div id="less10" class="box move"> < 10 </div>';
var less100='<div id="less100" class="box move"> < 100 </div>';
var more='<div id="more1" class="box move"> > </div>';
var more10='<div id="more10" class="box move"> 10 > </div>';
var more100='<div id="more100" class="box move"> 100 > </div>';
/* */

var radioButtonStart='<input type="radio" name="pagination" id="radio';
var radioButtonLabelStart='"><label for="radio';
var radioButtonLabelEnd='">';
var radioButtonEnd='</label>';
myPagination.innerHTML = first + less100 + less10 + less;

for(i=640; i<650; i++){

// myPagination.innerHTML += myDivStart + i + myDivEnd;
myPagination.innerHTML += radioButtonStart + i + radioButtonLabelStart + i + radioButtonLabelEnd + i + radioButtonEnd;

myPagination.innerHTML += more + more10 + more100 + last;
return myPagination;


function init(){

window.onload = init;



1.get last radio button
2.add ten
3.send to for loop and recalculate
var lastRadio="sss";


}); // END jQuery

Answer Source

Some issues:

  • the jQuery ready callback is triggered before the window.onload callback. The jQuery ready event corresponds to the DOM's document.DOMContentLoaded event, and the DOM's load event to jQuery's load event.

  • You mix jQuery and native DOM API calls. This is not a problem in itself, but if you are willing to use the native DOM API, why use jQuery at all? Or if you want to use jQuery, why still use the longer syntax of the native DOM API?

  • There seems no good reason to respond to the load event; you could just join the two pieces of code and execute them on ready

So, remove this line:

window.onload = init;

Add add a call to init at the start of your ready handler:

        // ... etc. 

That way you'll see the #more10 is found, and the click handler works.