We Keep Coding

How do I use jQuery's insertBefore() function with a javascript string of HTML?

I am performing some DOM manipulation once my page loads and I was hoping to add some html right before an a specific div on the page. Not sure what I'm doing wrong here, I'm sure there's a simple way to accomplish this...
var finalStringHtml = '<div id="chartLinks">' + tableString + '</div>';
$(finalStringHtml.html().insertBefore("#chart_div")); //fails
$(toString(finalStringHtml).html().insertBefore("#chart_div")); //fails

You don't need the .html() call. (full docs: http://api.jquery.com/insertbefore/)
Try:
$(finalStringHtml).insertBefore("#chart_div");
If you want to, you can do the full code on one line and not create the variable:
$('<div id="chartLinks">' + tableString + '</div>').insertBefore("#chart_div");

Only load link from <iframe> when mouse is hovering over

I use the following bit of code for a template I append in my index.html. The issue is that I have thousands of <td>'s that gets appended in a loop. And I have a feeling that when I append all of this it loads the http://en.wikipedia.org for all the <td>'s before actually hovering over the link. This is obviously not a usable solution as it takes hours, if not days, to load up the page. I had to kill the site when I tried. Is there a way to set <iframe> so it ONLY loads the page when hovering over it?
template += " <td>";
template += "<a target='_blank' href="+entry['insta_url']+" style='display:block;'>";
template += entry['id'];
template += "</a>";
template += "<div class='box'><iframe src='http://en.wikipedia.org/' width = '500px' height = '500px'></iframe></div>";
template += "</td>";

You could omit the <iframe>'s src attribute, then capture, via JavaScript, the mouseover event, and set the src when the event fires.

Initializing isotope with dynamic data json

I have searched around but no help. My issue is I am using the isotope jQuery library to show data (of course) and I am trying to do this by using a dynamic json dataset. I placed the data in a .json file and I'm reading it in and parsing information, then placing that info in divs under my container div like so:
$('#infoContainer').append('<div class="hospital ' + $number + '"><p>' + i + '<br />' + hospital.address + '<br />' + hospital.citystatezip + '</p></div>');
Of course that portion is in an .each() function for each hospital. My problem is that the initialization code won't show the dynamic divs like it shows when you manually type them. I'm using what is given on the isotope website:
$('#infoContainer').isotope({
itemSelector: '.hospital'
});
Any ideas?

The answer is found on this question: JavaScript Isotope- How to manage dynamic data set (re-initialize Isotope)
I needed to use the insert method.

conditionally hide/removing templated data before it is injected into the dom?

Basically at the moment I have 2 buttons that both use the same template to get JSON data and then display the templated content in the same div, clearing the HTML and inserting as required. My problem is that 1 button requires me to present position numbers <span class="positionNumber">'+i+'</span> whereas the other doesn't, is there a way I can add or remove this from the template based on the button selected with a conditional or something like that?
JS
var template = '<img src="http://img.youtube.com/vi/'+data.feed[i].code+'/0.jpg" alt="'+data.feed[i].title+'" class="videoThumb" /><span class="positionNumber">'+i+'</span><h2>'+data.feed[i].title+'</h2>';

Maybe its overkill for this but have you tried the jquery tmpl plugin.
http://api.jquery.com/jquery.tmpl/
you can specify if statements within your template along the lines of
{{if ${i}}} <span class="positionNumber">'+i+'</span> {{/if}}
if i isn't set then the span tag wont appear.
Edit: Alternatively check i and append the template string accordingly when required.
var template = '<a href="http://www.youtube.com/embed/'+data.feed[i].code+'" class="videoEntry videoBg'+i+'" target="_blank"><img src="http://img.youtube.com/vi/'+data.feed[i].code+'/0.jpg" alt="'+data.feed[i].title+'" class="videoThumb" />';
if (typeof i != 'undefined'){
template += '<span class="positionNumber">'+i+'</span>';
}
template += <h2>'+data.feed[i].title+'</h2></a>';

Same suggestion as the other answer (to edit the template), but maybe a cleaner approach would be to use the ternary operator:
var template = '<img src="http://img.youtube.com/vi/'+data.feed[i].code+'/0.jpg" alt="'+data.feed[i].title+'" class="videoThumb" />' + (typeof i == undefined ? '<span class="positionNumber">'+i+'</span>' : '') + '<h2>'+data.feed[i].title+'</h2>';

Apostrophes in jquery/javascript string

I have the following code which appends an icon with an alert after the <a> tag :
$j("li[name='"+node_name+"'] > a").after('<a onmouseover="alert(\' expnote_from_db[n][0] \');" ><ins class="' + selected_class + '"> </ins></a>');
The code above works fine except that it displays exp_from_db[n][0] as a string inside the alert box.
So I changed it to the code below but nothing is displayed now
$j("li[name='"+node_name+"'] > a").after('<a onmouseover="alert(\'"'+ expnote_from_db[n][0] + '"\');" ><ins class="' + selected_class + '"> </ins></a>');
I don't understand where did I go wrong with the apostrophes.
I would appreciate your help regarding this. Thanks

This should work
$j('li[name="'+node_name+'"] > a')
.after('<a onmouseover="alert(\''+ expnote_from_db[n][0] + '\')" ><ins class="' + selected_class + '"> </ins></a>');

The " characters are delimiting the HTML attribute. You are terminating that attribute prematurely.
<a onmouseover="alert(\'"
Nesting JavaScript in HTML attributes is a pain.
Nesting JavaScript in HTML attributes in JavaScript strings is a bigger pain.
Don't do it. Apply event handlers using addEventListener and friends (since you are using jQuery that means using the on method which abstracts them).