Develop Reference

jQuery, Html element form external file to string in jquery, how?

I am working on a project where i need to get a specific element from an external html file as a string in my jQuery.
As i understand the .get(); function cannot get a specific element (by class or ID) and the .load() can, but loads it directly into the dom of the file.
Is there another function or a way to go about this?
What i need to do is get a specific html element and replace some macros in it with data from an object and then append it to an element (multiple times.) Therefore i cannot just load it in and replace the macros afterwards.

You can .get it and then only subselect.
$.get('myfile.html', function(response) {
var inside = $(response).find('#inner-id');
// do stuff with inside...
});

How to append to a variable in jquery?

I have the following code:
var golden_site = '<div id="golden_site"></div>';
$('.form_content').append(golden_site);
var lookup = '<input type="text" name="lookup" value="test">';
Why is this not working:
$(golden_site).append(lookup);
But accessing the node by id works:
$('#golden_site').append(lookup);

This $('#golden_site') selects the div with id=golden_site. While this $(golden_site) doesn't select anything.
Taken from here, you have the following ways of selecting an element using jQuery
Selecting Elements by ID
Selecting Elements by Class Name
Selecting Elements by Attribute
Selecting Elements by Compound CSS Selector
Pseudo-Selectors
The way you tried to select your div doesn't follow one of the above ways. Hence you didn't make it. While using the id you made it, since this is included in the above ways.
update
As Guffa pointed out (I didn't now it) in his comment,
The call $(golden_site) doesn't try to use the string as a selector at
all. It will create an elements from the HTML string, and actually
return that element

The code is working fine, but it doesn't do what you think.
The $(golden_site) part will create a new div element from the HTML code in the string. The lookup element will then be appended to that div. As the div is an element that you just created, it's not in the page and the lookup element that you appended to it isn't in the page either.
If you create the div element first and then append that to the page, instead of using a string in the append, then you have a reference to the div element:
var golden_site = '<div id="golden_site"></div>';
var element = $(golden_site);
$('.form_content').append(element);
Now you can append things to it:
element.append(lookup);

Because when you say
$(golden_site).append(lookup);
Actually you mean:
'<div id="golden_site"></div>'
In plain words, it's just a string, not a jQuery object that can be appended to. golden_site is just a string.

The reason is because the $() is in fact a wrapper of jQuery over the document.querySelector(). So as expected both methods should behave similar, when you do:
$("#blah").append(x);
Indeed the browser is doing this:
document.querySelector("#blah").appendChild(x);
So both methods should work as they explain here -> How query Selector works
As you can see the variable passed as argument is a string that will be used as a CSS Selector, they explain here -> CSS Selector List
I will add this graphic with some of the most common ways to select elements from the DOM, don't forget the '', courtesy from W3CSchools.

Element duplicates when append

At first, I'm trying to create a basic tcg in jQuery, Ajax and PHP.
The following fiddle is my try to append the card to empty places and change the data attribute value, but When I click in a card, it creates other "cards" and the value doesn't changes.
http://jsfiddle.net/bNB89/1/
The code I tried to use for data changing:
$(this).data('place', 'field');
How can I fix this?

The problem in your code is that you are using append in a class, so the content is being created in every element containing that class. You should instead fetch for the first element with the class, append to it and then remove the class so it won't be selected again. I set up a fiddle demonstrating it http://jsfiddle.net/bNB89/2/

You get other cards because there are multiple .myslot elements and each one will get a copy.
Use a selector that will give you one item to append to. e.g. .myslot:empty:first.
.data() does not change data attributes it uses its own internal mechanism to store the data. If you really want to change the attribute you can use attr.
http://jsfiddle.net/bNB89/3/

get appended div id in jQuery

Is there any way I can get the id (or any other reference to) the element I've just appended using jQuery .append() ?
I'm receiving an html string with ajax and injecting in a div.
$.get(URL, args).success(function (response) {
$('#mainDiv').append(response);
});
Now I have to change something to the newly appended div (like a css property).
Please note! These solutions are not accepted, reasons are provided.
append to a temporary unique div - reason: the response contains javascript which works only if the injected html is in its environment. Calling .append will make this js run and it must be inside of mainDiv.
using a known id for the injected div - reason: the div I'm receiving in response has an id but it could be a random string and, for the moment, I need to assume I don't know it.
Perhaps anybody know a secure, reliable and consistent way to access the node I've just created in mainDiv. If .append always attach at the end, perhaps refering last node is ok: am I wrong?

You can have jQuery object reference like: var j =$(response); , and then append it : $('#mainDiv').append(j); and change its css: j.css("border":"0");

How to retrieve an id of an html element in JavaScript

I want to know is there any way to identify an html element by its "id"?
If so than
how can I call another html element e.g html table by is id all this using java script.
<a id="a" class="menuheader" >New Arrivals</a>
<a id="a1" class="menuheader" >Concepts</a>
I want JavaScript to identify the id of the above two elements and upon identifying the id call another html element i.e a table.

I am not quite sure what you want.
To get an element by its ID, you can use document.getElementById(id).
To get the ID of an element, you need a reference to the element and access the id property: element.id.

To access an object in your DOM by its id you can use document.getElementById("...").
To enumerate the children of a container:
for (var i in containerElement.childNodes)
var elementId = containerElement.childNodes[i].id;

You could always use the jQuery JavaScript framework, which IMO is way better than plain old JavaScript for the most part. In jQuery you would just pass the eleent's ID you want to select (prevexied by the hash symbol to identify the selector is an ID) as a string to the jQuery function. Then , your action would follow a period after the selector
jQuery('#a').actionGoesHere()
But you would more commonly call the jQuery function by it's alias, the dollar sign:
$('#a').actionGoesHere()
Not so sure by what your second part of the question means, so if you clear that up a little, I'd be glad to help.

https://developer.mozilla.org/en/document.getElementById

I think something like this is what you are trying to do if I understand you correctly.
The first one is if you are using named anchors to call your tables
$("a").click(function () {
if ($this.has($("#a"))) { $this.attr("href", "#myfirsttable") }
if ($this.has($("#a1"))) { $this.attr("href", "#mysecondtable") }
});
I haven't had time to try it out yet, and I'm a bit sleepy right now and not at my sharpest, but this is the simplest way I can think of at the moment.