How to load content from an external URL and insert it into an element with jQuery?

To load content from an external URL and insert it into an element with jQuery, you can use the $.ajax() or $.get() method to make an ajax request to the external URL and retrieve the content. Once the content is retrieved, you can use jQuery to insert it into the desired element. Here's an example:

// Assuming you have a button with id "loadContentButton" and a div with id "contentContainer"

$(document).ready(function() {
  $('#loadContentButton').click(function() {
    // Make ajax request to the external URL
    $.ajax({
      url: "https://example.com/external-content",
      method: "GET",
      dataType: "html", // or "text" if the response is plain text
      success: function(response) {
        // Insert the retrieved content into the element with id "contentContainer"
        $('#contentContainer').html(response);
      },
      error: function(error) {
        console.error("Error loading content:", error);
      }
    });
  });
});

In this example, when the button with id "loadContentButton" is clicked, an ajax request is made to the external URL specified in the url property. The response is expected to be in HTML format, but you can change the dataType property to "text" if the response is plain text.

If the request is successful, the retrieved content is inserted into the element with id "contentContainer" using the .html() method. If there's an error during the request, an error message is logged to the console.

Remember to replace the example URL (https://example.com/external-content) with the actual URL from which you want to load the content.