document.querySelector（“。class h1”）

Question

I'm working on my schools webpage, and i'm trying to select all header elements inside a div with a class called "text" using the querySelector(String) function - and then changing the headers background, border, and text colour, but the following code doesn't seem to work

var test = "content.html #test"
$(document).ready(function()
{
    $.ajax(
    {
        success : function(data)
        {                   
            $("#content").load(test); //this works - loads <div id="test"> and all elements within it from content.html
            document.querySelector(".content").style.backgroundColor = "#CCFFCC"; //this works - exists inside main html file ( $(document) )
            document.querySelector(".text h1").style.backgroundColor = "#CCFFCC"; //this doesn't work - still loading default colour from css
            document.querySelector(".text h1").style.color = "#003300"; //this doesn't work - still loading default colour from css

//Appropriate close tags follow...

Would you guys know what i'm doing wrong? Am I referencing my elements in the wrong way? or does it have something to do with the fact that i'm trying to dynamically load this content from a separate file? Or something else entirely?

Answer 1

As Klaster_1 intimated, you need to utilize load 's callback functionality.

$('#content').load(test, function() {
    document.querySelector(".content").style.backgroundColor =    "#CCFFCC";
    document.querySelector(".text h1").style.backgroundColor = "#CCFFCC"; 
    document.querySelector(".text h1").style.color = "#003300"; 
});

What Klaster_1 means when he says it's an "async" operation is that it runs out of sync of the rendering of the DOM. In other words, that code styling the content will be run before the browser's run loop has a chance to actually put the content on the page.