What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Question

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Currently, I am importing an HTML file into a <div> in this manner:

function load_content() {
    document.getElementById('content').innerHTML = '<object type="text/html" width="100%" height="100%" data="./content.html"></object>';
}

The content is successfully displayed on the page. However, it appears as its own object with a scrollbar on the side (similar to a frame), whereas I want the <div>s from the external file to display on the page as if they were directly written there.

Is there a way to achieve this without using jQuery?

javascript html css

Answer 1

Answer №1

To incorporate an Ajax call, you can utilize the following code snippet:

let xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200 && this.responseText !== null) {
            document.getElementById("data").innerHTML = this.responseText;
        }
    }
};

xmlhttp.open("GET", "data.html");
xmlhttp.send();

Answer 2

To incorporate an Ajax call, you can utilize the following code snippet:

let xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        if (this.status === 200 && this.responseText !== null) {
            document.getElementById("data").innerHTML = this.responseText;
        }
    }
};

xmlhttp.open("GET", "data.html");
xmlhttp.send();

Answer 3

Answer №2

One neat trick in jQuery is using the load() method to fetch specific content from an external file:

The .load() method offers a more targeted approach compared to $.get(). By providing a precise syntax in the url parameter, we can specify which part of the remote document should be imported. Simply add a jQuery selector after a space in the string to determine the exact content that needs to be loaded.

For instance,

$("#result").load( "ajax/test.html #container" );

This code snippet will pull the element identified by the ID container from test.html and its contents, inserting them into the element with the ID result.

Answer 4

One neat trick in jQuery is using the load() method to fetch specific content from an external file:

The .load() method offers a more targeted approach compared to $.get(). By providing a precise syntax in the url parameter, we can specify which part of the remote document should be imported. Simply add a jQuery selector after a space in the string to determine the exact content that needs to be loaded.

For instance,

$("#result").load( "ajax/test.html #container" );

This code snippet will pull the element identified by the ID container from test.html and its contents, inserting them into the element with the ID result.

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

Answer №1

Answer №2

Similar questions

How to create a fixed header navigation in SquareSpace

Issue with model not displaying after material added in OBLLoader + MTLLoader

An unusual phenomenon in the controller hierarchy causing issues with accessing the parent scope in AngularJS

Personalizing HTML input fields

Ways to verify if a value already exists in a pre-existing JSON file using Node.js

The Service Worker seems to be neglecting to serve the sub-pages at

The issue of `for` loop and `forEach` loop not functioning in EJS

Attach an event listener to the HTML content

Unable to change placeholder in Material UI's Select Form

Creating dynamic scroll animations for sidebar navigation in a single-page website with anchor links

The file_get_contents() function encountered an issue as the content type was not specified, leading to it assuming

Customizing the Background of an Input Box

Updating the variable in Angular 6 does not cause the view to refresh

I am facing difficulty in getting React to recognize the third-party scripts I have added to the project

The Vue JS Router is prominently displayed in the center of the webpage

Using jQuery to smoothly scroll to a specific class name

Preventing multiple clicks by toggling the HTML tag on and off

Display my additional HTML content on the current page

Why is the image auto-swapping script failing to display images frequently?

Resizing Images with 'fitin' Attribute in HTML