Develop Reference

Using a variable as a classname

I am trying to put a class name stored in a variable into my JQuery where I want the class to be, this should change which class is affected depending on the parameter passed through the URL query string.
I have built the class name and stored it in the 'param' variable as below.
var param = '".' + "proj" + location.search.substring(6) + '"';
$(param).css('display', 'inline');
And want to change the css on the class inside of it but this does not seem to work for me. Perhaps because it tries to change the css of the variable rather than what is inside of it.
If not how can I solve this or if so, is there a better way I could go about this?

You're confusing a string literal to be only enclosed by double quotes ", while that is not the case. Remove them
var param = '.' + "proj" + location.search.substring(6);

Set the param variable as the location substring (assuming that this substring is correctly getting the desired result from your URL) - then use that in the jQuery by joining with the common portion as follows.
var param = location.search.substring(6);
$('.proj' + param).css('display', 'inline');
You will need to ensure that a) you have the jQuery library and b) you have the jquery code wrapped in a $(document).ready(function(){}) wrapper.
Also - its usually better to add / remove a class rather than directly affecting the CSS in the jquery
var param = location.search.substring(6);
$('.proj' + param).addClass('displayInline');
//CSS
.displayInline{display: inline}

How can I select with jQuery and use javascript method to apply a change?

I'd like to use a variation of this code, but I'm having a bit of trouble concatenating the following snippet. Essentially using a for loop from a returned value.length and append the buttons, then replace data for buttons:
for(var i...){
var button = "'<button>%data%</button>'";
$(".buttons").append(button).replace("%data%", var);
};

You don't need to make the replace after you append the element. You should just set var directly on element either with text or html, depending on what var holds. Also, please notice that jQuery doesn't have a method called replace, it only has replaceWith (http://api.jquery.com/replaceWith/) and replaceAll (http://api.jquery.com/replaceAll/).
for(var i...){
var button = $("<button></button>").text(var);
$(".buttons").append(button);
};

How can I use Javascript to get the value of an element that was populated by a POST request?

I'm building an HTML page that receives data from another page with the below code
$arrayPosition = $_POST['arrayPosition'];
echo '<span id = "arrayPosition">'.$arrayPosition.'</span>';
I'm then trying to use javascript to get the value of the element and pass it to a function with the below code
var initialPosition = document.getElementById('arrayPosition').value;
function displayWork(position){
$("#displayArtwork").detach()
.append(holdImages[position])
.hide()
.fadeIn("fast");
}
When I alert the value of initial position to the screen it informs me that null is its value, however, when I inspect the element it looks like this
<span id="arrayPosition">4</span>
Am I making some really stupid error, or misunderstanding the way to access this posted data?
Thanks for your help!

Since arrayPosition is a span, it has no value. You can get its innerHTML:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Or using jQuery:
var initialPosition = $('#arrayPosition').text();

A span-element has no value. Only form-elements can contain the value-attribute. To get the text inside your span you can use the innerHTML-porperty:
var initialPosition = document.getElementById('arrayPosition').innerHTML;
Demo
As you are already using jQuery you can also use it's text()-function:
var initialPosition = $('#arrayPosition').text();
here you can also use:
$(document.getElementById('arrayPosition')).text();
Harder to maintain and more difficult to read but faster than the jQuery-Selector. (see here)
Demo 2
Reference
.innerHTML
.text()

Trying to replace a html attribute using a click function

I'm trying to take an a element and take the information from the data-id attribute and store it into a variable. I want to then splice this variable so I get the part that I need and implement it into another variable with some text. From that I then want to replace the src attribute of an iframe with the variable. Unfortunately, this doesn't seem to be working at all and I can't find the issue.
Here is the code:
$('.watchvideo').click(function(){
var idu = $(this).attr('data-id');
var id = "//www.youtube.com/embed/"idu.substr(27,37);
$('.videofeatem').setAttribute("src", id);
});

You have 2 issues in code:
1) concatenating substring
2) setting attribute via jquery
var id = "//www.youtube.com/embed/"+idu.substr(27,37);
$('.videofeatem').attr("src", id);

Without seeing the HTML, it's tough to be sure, but a + fixes the obvious problem:
$('.watchvideo').click(function(){
var idu = $(this).data('id');
var id = "//www.youtube.com/embed/" + idu.substr(27,37);
$('.videofeatem').attr("src", id);
});
Also, note that data-xxx attributes can be read by jQuery as .data('xxx')

Simply.
var id = "//www.youtube.com/embed/" + idu.substr(27,37);

Since you're using jQuery, use the .attr() method instead of the .setAttribute().

Variable as jQuery selector focus

I'm using JavaScript to copy a specific div from a page into a new page. I need to remove the ID attributes for each table in the new page.
It seems that since I'm copying content from the first page, I can filter out the IDs from the string before it is written to the second page. Can jQuery take a variable as its 'focus'? Instead of manipulating the entire DOM, manipulate a particular string?
I have a non-working version of what I'm talking about:
var currentContent = window.open('','currentContentWindow');
var htmlToCopy = '<html><head><title></title></head><body>' + window.frames[0].document.getElementById('PageContentPane').innerHTML + '</body></html>';
$("table", htmlToCopy).removeAttr('id');
currentContent.document.open();
currentContent.document.write(htmlToCopy);
currentContent.document.close();

You need to create a jQuery object by calling $(html), manipulate it, then get the HTML back by calling html().
For example:
var currentContent = window.open('','currentContentWindow');
var htmlToCopy = '<html><head><title></title></head><body>' + window.frames[0].document.getElementById('PageContentPane').innerHTML + '</body></html>';
var newStructure = $("<div>" + htmlToCopy + "</div>");
newStructure.find("table").removeAttr('id');
currentContent.document.open();
currentContent.document.write(newElements.html());
The <div> element allows me to get its inner HTML and get the HTML you're looking for.

Who not just remove ID= as a string and forget DOM manipulation all together?

First make the string a jQuery object, then work with it:
htmlToCopy = $(htmlToCopy).find("table").removeAttr('id').end().html();