display html file in a div

Question

I've been trying to search for a way to do this as I'm sure there's hundreds of websites explaining it but I just can't word it right so all my searches come up with something else.

So I'm sorry if this has been asked many times before.

Anyway, what I'm trying to do is load a page 'page.html' inside a div. The page just has text and nothing else. So instead of using an iframe I want to load this page inside the div so that it'll only show the text that is on that page.

I've tried a few different things that I found during my search like;

$(document).ready(function() {    
    $("div").load("page.html") 
});

But for some reason that method changed all my text on the page instead of being inside that div. (I'm pretty horrible at coding so I've probably gone wrong somewhere with that method)

So can anyone suggest for a way to load the content of a page inside a div not using an iframe.

Answer 1

$('div') is going to target more than you're looking for. If you're trying to load the content into a specific div element, give it an ID and target it that way.

<div id="pageContent"></div>

$(document).ready(function() { 
    $('#pageContent').load('page.html');
}