Stack Exchange
JS querySelector: How to take HTML Tag data and hard code it into javascript without the need for HTML tags
I am trying to figure out what all its trying to get from the code below:
var svg   = document.querySelector('svg'),
path  = document.querySelector('path');
var code = document.querySelector('#code');

And the code that its referencing above is:
<textarea id="code">var curve = new CurveAnimator(
 [206,47], [182,280],
 [90,234], [273,101]
);

var o = document.getElementById('img');
o.style.position = 'absolute';

curve.animate(2, function(point,angle){
  o.style.left = point.x+"px";
  o.style.top  = point.y+"px";
  o.style.transform =
    o.style.webkitTransform =
    o.style.MozTransform =
    "rotate("+angle+"deg)";
});
</textarea>

<section>
<svg viewBox="0 0 450 370" width="400px" height="370px" xmlns="http://www.w3.org/2000/svg" class="content">
    <path d="M50,300 C50,100 350,100 350,300 " />
</svg>
</section>

The goal is to take those HTML code and place it within the javascript itself so its not looking for it in the tags in the HTML code. However, i am unable to find out what its getting from those querySelector in order to do that myself.
Any help would be great!
When i do alert(document.getElementById('code')); i get this:

Code string:
var code = "var curve = new CurveAnimator([206,47], [182,280],[90,234], [273,101]);var o = document.getElementById('img');
o.style.position = 'absolute';curve.animate(2, function(point,angle){o.style.left = point.x+""px"";o.style.top  = point.y+""px"";o.style.transform = o.style.webkitTransform =o.style.MozTransform =""rotate("" + angle + ""deg)"";});"


This may be a useful link: https://developer.mozilla.org/En/DOM/Document.querySelector

Yeah i alrady checked out that site @SurrealDreams. Do not understand it since I've already tried to see what code was by doing a alert(code); and it just told me it was an element.

Protip: Use console.log instead of alert when dealing with DOM Elements.

youre getting the right thing, if you want the content of #code, then you need to do alert(document.getElementById('code').innerHTML)  all youre doing at the moment is finding the node called code

@RGB: It tells me Error: document.getElementById("code").html is not a function when i try doing that. But that's along the lines of what i am trying to figure out so thank you for addressing my original question :o)

yea, sorry, i was writing jquery, i updated, you need to use .innerHTML instead of .html()

@StealthRT. html() is jQuery, you need .innerHTML

As far as I can see, if you are prepared to use jQuery, there's no need ever(?) to use document.querySelector() (though someone may know of some unusual circumstance). In general, jQuery will do everything document.querySelector() does plus a whole lot more.

@Beetroot-Beetroot i wouldn't necessarily just use jQuery for the fun of it...I suppose it depends on your level of knowledge/how much extra coding you want to do to do it in plain old js, but it adds an overhead to the site that might be overkill for your needs...IMO

@RGB, yes indeed - I had skill level and overhead issues in mind when I said "if you are prepared to use jQuery".

@Beetroot-Beetroot, but StealthRT may not have, just putting it out there for him :)

You're getting the right thing, if you want the content of #code, then you need to do 
alert(document.getElementById('code').innerHTML)

all you're doing at the moment is finding the node called code
to get that code onto the page you need to do this, 
var node = document.createElement("script");
node.innerHTML = document.getElementById('code').innerHTML;
document.getElementsByTagName("head").appendChild(node);

this will extract the code from your textarea, create a script tag in the header, and add the content from your div..then the page will the code ready to use, and all you will have to do is invoke it.
alternatively, you could have this content in a external js file and on document load add it to the page in a similar way...
var node = document.createElement("script");
node.setAttribute("href","js/curveanimate.js") 
document.getElementsByTagName("head").appendChild(node)


How come when i try doing this: var code = 'var curve = new CurveAnimator([206,47], [182,280],[90,234], [273,101]); var o = document.getElementById('img'); o.style.position = 'absolute'; curve.animate(2, function(point,angle){o.style.left = point.x+"px";o.style.top  = point.y+"px"; o.style.transform = o.style.webkitTransform = o.style.MozTransform = "rotate("+angle+"deg)";});' it doesn't work?

isn't that a competely different question? haha mark me correct pls! lol

it seems to be just a string but I dont think escapes work within single quotes...try surrounding it it double quotes and escaping the " instead...might do the trick

My OP said: The goal is to take those HTML code and place it within the javascript itself so its not looking for it in the tags in the HTML code. However, i am unable to find out what its getting from those querySelector in order to do that myself.

i would just put this code into a <script></script> via the dom if i wanted to programatically make it available to the page

i dont think that you can execute a script from a string from within another script... loading the code up as a string isnt going to get you where you want to go (I dont think...)  you will have to have that code base ready to require as needed and then add the code to the page when it is needed

i can not seem to get the syntax correct for it. Check OP for code string.

I do not see anywhere in the code where i have ""var""? Only "var =...

ugh...var is a var for your variable names...let me rephrase, replace "" with /"

You sure thats correct? I am getting all kinds of errors when doing it that way.. "var curve = new CurveAnimator([206,47], [182,280],[90,234], [273,101]);var o = document.getElementById('img'); o.style.position = 'absolute';curve.animate(2, function(point,angle){o.style.left = point.x+"px";o.style.top  = point.y+"px";o.style.transform =o.style.webkitTransform =o.style.MozTransform ="rotate("+angle+"deg)";});" Works

am i doing your homework? you only have to escape " that exist inside the string so that they dont close up your string.  ie var something ="this is a string\"this is a string inside a string\" now its back to the original string"  you dont escape the opening and closing " only the ones inside the opening and closing " of the string.

you OP is titled "JS querySelector" not, "How do I dynamically add javascript to a page"...but heres the answer to that one too..see my edits.

Thanks for taking the time to do that but i guess i am not being clear. I want to do away with any HTML TAG its getting the data from. I want to HARD CODE IT within the javascript itself without the need to use any html tag whatsoever. Pretend the HTML tags are not there and all i have is the code from them to place into the javascript for those parts.

you cant execute a string as code, you simply cant do it in javascript. (there would be a ton of vulnerabilities if that was the case)  if you dont want that code availble to the page, then put it into an external js file..

Trying var node = document.createElement("script"); node.setAttribute("href","js/curveanimate.js"); and then referencing that doing var code = document.getElementsByTagName("head").appendChild(node); gives me the error: Error: document.getElementsByTagName("head").appendChild is not a function

StealthRT, answers are meant to answer the question as is; please avoid dragging answerers beyond the scope of the question through comments. If you have a new question and you're able to formulate it as a proper question on its own, please ask a new question instead.

document.querySelector('svg')  === document.getElementsByTagName('svg').item(0)
document.querySelector('path') === document.getElementsByTagName('path').item(0)
document.querySelector('#code') === document.getElementById('code')

querySelector returns the first matched element, or null if it didn't find any.
document.querySelector

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.

You should take a tutorial about CSS selectors.

document.querySelector('svg')  === document.getElementsByTagName('svg')[0]:-) (same for path)

But doesn't querySelector() return only the first matched element? And a hearty +1 to @FlorianMargaine... =)

I know what its going to in order to get the data. I just do not know how to go about see what its getting from them.

@StealthRT. What do you mean? it gets those elements.

@gdoron: Check my updated OP. It doesnt tell me what its getting. Is it just CurveAnimator or [206,47], [182,280], [90,234], [273,101] or the word cow.... i dont know.

@FlorianMargaine More accurately, document.querySelector('svg') === document.getElementsByTagName('svg').item(0)

+1 for the null/undefined behavior, I didn't know about it. @Neil what's the difference?

@FlorianMargaine. I updated, neil gave a better syntax. it does the || null thing out of the box. read about the item function on MDN

@gdoron: If i do path  = "M50,300 C50,100 350,100 350,300" then the code no longer works when i run it.

@FlorianMargaine Using [0] treats the collection as an array, so out of bounds references work like regular JavaScript undefined property accesses (triggering strict warnings if you're into that sort of thing) while using .item(0) calls a method on the collection, so it converts its parameter into an integer and returns null if it is out of range.

@StealthRT. I can't understand what exactly is your goal.

@gdoron: Check with RGB's answer post.

@gdoron: I was just using path as an example. But in any case, path or code, when inserting the string into it, it no longer works without it getting it from the tag name for some reason.

You just need to add '.value' to the end to see that property
alert(document.getElementById('code').value)

Here's an example with your code.
EDIT:
Is this more along the lines of what you're looking for?

@tdwill: Correct but how do i put that code inside the javascript instead of having to find it inside HTML tags?

That seems to just dynamically placing the code into the HTML tags. I want to do away with having to do anything in tags.
