1

I used $("#header").load("index.html #header"); to load a div with the id "header" from index.html and used it in another page, named current.html, to display the same div.

In my header div on index.html (the original div), there was an element <a> with id "about". Now, after copying, I want to change the class of the "about" <a> tag. However, when I used document.getElementById("about").className="active", it returned null because this div was copied.

Can anyone help?

Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
user2559898
  • 17
  • 3
  • So, do you have the '#header' element twice in the same page after copying? You shouldn't use ids in elements that can appear more than once. Can you make a jsFiddle example? – AntouanK Jul 08 '13 at 08:17

1 Answers1

3

it returned null because this div was copied

That's not the case. I believe you are simply trying to access the element before it exists. Pass a callback to .load and change the class once the HTML was loaded:

$("#header").load("index.html #header", function() {
    $('#about').addClass('active');
});

See also: Why does jQuery or a DOM method such as getElementById not find the element?.

Community
  • 1
  • 1
Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
  • Another thing is: if I copy and past all the cod of this div, the font will be the same, but the font (everything in this div) will become smaller if I use load. Would you please also help? – user2559898 Jul 08 '13 at 08:24
  • Sounds like a problem with one of your CSS rules. Inspect the element and check which rules apply. – Felix Kling Jul 08 '13 at 08:26