Organizing HTML and JavaScript files

Question

I know that it is a good practice to organize files by separating them into files. ie, files.html and files.js . However, I have lately been looking at some websites and the way their files are organized. They tend to contain tiny bits of JavaScript inserted here and there inside the html file.

Now, these files tend to be organized in a very particular way, one thing I have noticed is how I don't see much of document.getElementById(id) or ids. So, I am curious to know what is the best way to grab the elements using JavaScript. Should I grab the elements in the html file or in the JavaScript file, and how?

For instance take as an example the when a question is posted in Stack Overflow. Similar results are shown. What would the JavaScript would look like if I have something like the following:

 /* SOMETHING LIKE THIS but this would mean that I would have to grab the elements everytime the event is fired (not sure this is a good idea) */ var question; var similar_question; var ask_your_question; var maybe_already_answered; Questions.checkSimilarQuestions = function(){ question = document.getElementById('question'); similar_questions = document.getElementById('similar'); ask_your_question = document.getElementById('aks-your-question'); maybe_already_answered = document.getElementById('maybe-already-answered'); } /* OR MAYBE SOMETHING LIKE THIS */ (function(){ var question = document.getElementById('question'); var similar_questions = document.getElementById('similar'); var ask_your_question = document.getElementById('aks-your-question'); var maybe_already_answered = document.getElementById('maybe-already-answered'); /* Grab the rest of the elements and do something with them */ }())

 <div id='ask-your-question'> <input type='text' id='question'/> <div id='maybe-already-answered'> </div> </div> <div id='similar-questions'></div>

Answer 1

I am going to give this a try, but feel free to correct me.

The above example shows 2 different things Object Orientated JavaScript and Functional JavaScript.

A lot of inline JavaScript code is actually not inline in the static version of a web page but is either added by the server and / or a main JavaScript file.

Another reason you may not see document.getElementById() is because a lot, and I mean almost everybody, uses jQuery which uses a different Syntax. As far as I know there is no other way to fetch elements than document.getElement (id, class, tagname) with vanilla JavaScript. A jQuery declaration would look like

$('#wrapper');

Best Practice?

Well. I tend to declare elements I am going to be using as global variables. I can imagine that a lot of developers do this since it's easier to write

searchForm.appendChild(someElement);

than

document.getElementById('#search-form').appendChild(someElement);

Every single time.

I hope this gave you some insight as to best practice's :)

JSON example:

var elements = {
    body: document.getElementsByTagname('body')[0],
    wrapper: document.getElementById('wraper')};

etc...