Develop Reference

How can I get the value of an HTML tag using JS

Okay guys, I do have another thread related to this one, however this is a new question.
I have this code in my HTML page:
<span class="licon liconspan">1</span>
Now how can I get the value of "1" into a JS variable?

Actually "1" is not a value of a tag, it is its content. In its turn, it is stored in innerHTML property of a certain element. For your particular case, you can access it like this:
var variable = document.querySelector('.liconspan').innerHTML;

you must write the index [0] because the method document.getElementsByClassName
return an array
var element = document.getElementsByClassName(".liconspan")[0];
var variable = element.innerHTML;

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().

iterate inside a new JQuery object

I need to pass some html code as a parameter, however, before I pass it, I need to change some src attribute values.
I cannot use lastIndexOf or any of those to modify the html value since I don't know which value the src's will have.
What I'm trying to do then, is to create an object containing the html, and then alter that object only. I don't want to alter the actual webpage.
is this possible??
What I did first was this:
$('[myImages]').each(function() {
var urlImg = "../tmpFiles/fileName" + counter;
$(this).attr('src', urlImg);
counter++;
});
So finally, I had the desired code like this:
myformData = { theChartCode: $('#TheDivContainingTheHTML').html() }
However, this actually changes the image sources on the webpage, which I don't want to.
Then I thought I could create a JQuery object with the html so I could alter that object only like this:
var $jQueryObject = $($.parseHTML($('#TheDivContainingTheHTML').html()));
But now, I can't figure out how to iterate within that object in order to change the src attribute's values of the desired images.
Any help will be really appreciated ;)

There are several ways to do It. First would be creating a clone of target element and use the same on the Fly. You can do like below:
var Elem = $('#TheDivContainingTheHTML').clone();
now do whatever you want like iterate, alter,insert,remove.
var allImages =$(Elem).children("img");
Thanks Much!

Depending on when you want to change the object, solution will be different. Let's pretend you want to change it after you click another element in the page. Your code will look like that :
var clonedHTML;
$('#clickable-element').click(function() {
var $originalHTML = $(this).find('.html-block');
var $cloneHTML = $originalHTML.clone();
$cloneHTML.find('.my-image').attr('src', 'newSrcValue');
clonedHTML = $cloneHTML.clone();
return false; //Prevents click to be propagated
});
//Now you can use `clonedHTML`
The key point here is the clone method : http://api.jquery.com/clone/.

You can clone the elements:
var outerHTML = $collection.clone().attr('src', function(index) {
return "../tmpFiles/fileName" + index;
}).wrapAll('<div/>').parent().html();
You can also use the map method:
var arr = $collection.map(function(i) {
return $(this).clone().attr('src', '...').prop('outerHTML');
}).get();

attach every div to Javascript variable

I know a DIV can be attached to a Javascript variable with code like this:
var targetDiv = jQuery('#targetDiv');
However, I am looking for a way to attach ALL the DIVs or ones of a certain class to Javascript variables.
So, if I have the following elements:
<div id='bozo'>
<div id='ranger'>
<div id='smokey'>
I will end up with the variables:
bozo
ranger
smokey
I've been building lots of jQuery apps and they often have many divs that need to be kept track of in my code. I want to find an easier way to get control of these divs than assigning them to variables at the beginning of my app.
Either a jQuery or Javascript solution would be fine.

The most effective way would be to use a JavaScript object.
var divs = {};
$("div").each(function() {
if ($(this).attr('id') !== undefined) {
divs[$(this).attr('id')] = $(this);
}
});
With your current HTML, the divs could then be accessed like so:
divs["bozo"].show(0);
divs["ranger"]show(0);
divs["smokey"].show(0);
You can't name the JavaScript variables directly after the div IDs, because they have different naming conventions. For example, test-div is a valid ID for an HTML element, but not for a JavaScript variable.
However, if an ID just so happens to be a valid JavaScript variable name, then it can be accessed as a mnemonic property of the object:
divs.bozo.show(0);
divs.ranger.hide(0);
See this demo.
Edit: Added functionality to detect when the div has no ID, based on suggestions from icktoofay and ABFORCE.

I think there is no need to assign every jQuery object to a javascript variable/object. Because the jQuery syntax is very very easy to use.
You can refer to a html element so easy with jQuery, like this:
$("div") // all div elements
$("div#foo") // div with id="foo"
$(".foo") // all element which have 'foo' class
However if your want to assign to a JS object use this:
var obj = new Object() // or = {};
$("div[id]").each(function(){
obj[$(this).attr("id")] = $(this);
});

You can "...access those variables without executing any code, as browsers put elements with an id attribute into the global scope on their own." According to Blender's findings in the comment below. So one can access those variables by the div's IDs as demonstrated here:
http://jsfiddle.net/xhWwH/2
EDIT: Kept my previous answer for reference purpose.
Although I do not agree with this type of programming (very unsafe!!!!). I believe this is what you are looking for: http://jsfiddle.net/haoudoin/xhWwH/
$("div").each(function(index) {
console.log(this.id);
eval("" +this.id + "=this;");
});
console.log("creates: " + bozo);
console.log("creates: " + ranger);
console.log("creates: " + smokey);
// reference to your div
alert(bozo.id);;