I am currently updating my school's website and facing an issue with selecting header elements inside a div with the class "text" using the querySelector(String) function. I want to change the background, border, and text color of these headers, but the code below is not working as expected.
var test = "content.html #test"
$(document).ready(function()
{
$.ajax(
{
success : function(data)
{
$("#content").load(test); //this successfully loads <div id="test"> and its contents from content.html
document.querySelector(".content").style.backgroundColor = "#CCFFCC"; //this works fine within the main HTML file ( $(document) )
document.querySelector(".text h1").style.backgroundColor = "#CCFFCC"; //unfortunately, this is not changing from the default CSS color
document.querySelector(".text h1").style.color = "#003300"; //similarly, this remains the default color from the CSS
//Proper closing tags are used...
Do you have any insights into what might be going wrong? Could it be my references to the elements or perhaps because I am dynamically loading content from another file? Or could it be something different altogether?