I have appended HTML from a file to the DOM with AJAX, but its resources aren't loaded

JavaScript
1

I have appended the following HTML to the DOM with the following AJAX.

structure.html

<link rel="stylesheet" href="./style.css"></link> 
<div dir="rtl" class="camovb_main_box">
	<div class="camovb_phone_box">
		<a class="camovb_phone_link" href="https://wa.me/NUMBER">
			<img class="camovb_phone_icon" src="./whatsapp.svg"></img>
			<span class="camovb_phone_text">שיחת וואטסאפ</span>
		</a>
	</div>
</div>

AJAX

const whereToLoad = document.querySelector("body");
const ajax = new XMLHttpRequest();
ajax.open("GET", "/structure.html", false);
ajax.send();
whereToLoad.innerHTML += ajax.responseText;

The appendment operation works; the HTML structure is added to the document and appears as HTML output, but, my problem is that the resources (the CSS and the image) aren’t loaded, either with "./RESOURCE" pathing or with "/RESOURCE" pathing, so the HTML structure is styless and imagless.

How would you suggest to solve that problem?

2

Style sheets should go in the <head> of the document, not the <body>.

1 Like
5

Of course, my mistake, I also add a path problem with the image from all the changes, now it appears, thanks.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.