0

I have an html element with an id of "foo":

<p id="foo"> this is a paragraph of text </p>

So in javascript, I'd like to modify it. I can do this:

document.getElementById("foo").innerHTML = "new text";

This works. It changes the text in the element with the id "foo" to be "new text".

Ok, now I'd like to use javascript to add an element before the "foo" paragraph element. I looked up a resource that told me I could do something like this:

var newP = document.createElement("p");
var line = document.createTextNode("new text");
newP.appendChild(line);
var currentP = document.getElementById(foo);
document.body.insertBefore(newP, currentP);

Here's what confuses and surprises me. On the 4th line, var currentP = document.getElementById(foo); no quotes are used. In fact, if I add quotes, it doesn't work.

Why does the first example of document.getElementById() want the input wrapped in quotes, but the second does not??

To be clear, there is no variable in my .js file that I defined as foo. The only reference to foo that exists in any of my files is this line in html, where foo is in quotes:

<p id="foo"> this is a paragraph of text </p>

So how come it is being treated like a variable in this line?

var currentP = document.getElementById(foo);

Katherine
  • 207
  • 1
  • 3
  • 11
  • `foo` is a variable. It's value is the string with the ID to get. – Barmar Jun 24 '21 at 17:09
  • Look earlier in the code to see where it does `foo = "something"`. Or it might be a parameter to the function. – Barmar Jun 24 '21 at 17:10
  • @Barmar so when we use ```id="foo"``` in html, a js variable is automatically created behind the scenes? – Katherine Jun 24 '21 at 17:10
  • This is not specific to `getElementById`, it's just the way variables are used in JavaScript (and most other programming languages). – Barmar Jun 24 '21 at 17:10
  • Yes, but that's not relevant to this. That variable contains the element, not the ID. – Barmar Jun 24 '21 at 17:11
  • @Barmar, as detailed in my question, I never defined ```foo``` as a variable or parameter. – Katherine Jun 24 '21 at 17:11
  • 1
    If you didn't assign a string to `foo`, then that code won't work. – Barmar Jun 24 '21 at 17:11
  • 2
    foo exists as a property in certain browsers and namespaces (e.g. document.all). I would not count on this being accessible without a qualifier being repeatable or consistent across browsers and platforms. – Alexander Gräf Jun 24 '21 at 17:12
  • @Barmar, that is the crux of my question. It DOES work, and in fact, it ONLY works if I don't use quotes. – Katherine Jun 24 '21 at 17:12
  • @AlexanderGräf thanks. Then why is it only working if I reference the mysterious property ```foo``` and not simply "foo" in quotes? – Katherine Jun 24 '21 at 17:13
  • 3
    Please post a [mcve]. You can use a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) to make it executable. – Barmar Jun 24 '21 at 17:13
  • 1
    @Katherine See https://stackoverflow.com/questions/6381425/is-there-a-spec-that-the-id-of-elements-should-be-made-global-variable regarding the automatic global variables that are created from element IDs. – Barmar Jun 24 '21 at 17:13
  • 1
    document.getElementById("foo") should work without fault, the version without quotes might work but shouldn't be used anyway. Please follow the advice of providing an example. – Alexander Gräf Jun 24 '21 at 17:16
  • @AlexanderGräf It's not just "certain browsers". The requirement to turn IDs into global variables was added in HTML5 – Barmar Jun 24 '21 at 17:20
  • @Barmar Is that so, okay. Well, I'd still not use them, looks like it is too easy to pollute or reassign global variables. I remember this being an IE-only quirk. – Alexander Gräf Jun 24 '21 at 17:23
  • @AlexanderGräf As explained in one of the related questions, it started in IE, then was copied by other browsers, and eventually standardized. I agree that it's a bad idea to depend on it. – Barmar Jun 24 '21 at 17:28
  • @Barmar In any case, passing such a global variable to getElementById() would still not make sense, as it'd be already referencing the DOM element. – Alexander Gräf Jun 24 '21 at 17:31
  • 1
    @Katherine, when you say that code is working, do you mean your `newP` is being inserted before the "foo" paragraph correctly? Or do you just mean the variable `currentP` is being defined without any error throwing? –  Jun 24 '21 at 18:00

1 Answers1

2

The argument to document.getElementById() must always be a string. If you don't put the argument in quotes, it will be evaluated as an expression. In your example, foo without quotes is a variable, so its value needs to be a string containing the ID of the element you want to use.

Element IDs automatically become global variables. But the value of the variable is the element, not its ID, so it won't be a valid argument to document.getElementById(). I can't explain why it seems to be working for you, there must be something else assigning the variable.

Barmar
  • 741,623
  • 53
  • 500
  • 612