$(function(){ $.get("header.html", function(data){
$("#header").html(data); }); });
In the near future, I will need to accomplish this task in Java. For now, I am using jQuery, a JavaScript extension, but any format that achieves the desired outcome is acceptable.
I have 2 files: header.html
<!-- Header -->
<div class="row navigationBar">
<!-- Company Logo -->
<div class="col-2">
...
</nav>
</div>
</div>
</div>
<!-- Header End -->
and the webpage webpage.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="header"></div>
</body>
</html>
The goal is to load header.html and set it into the element with id=("header") within webpage.html
Currently, the only functioning code snippet is
$("#header").html("")
. With this syntax, I can successfully add content such as:
<p>Hello World</p>
However, I encounter issues when trying to include the loaded items from header.html.
--NEW CONTENT WITH ANSWER IN PROGRESS--
Despite the existing answers being incorrect, I have devised my own solution that should theoretically work. I just need assistance with implementing it.
Prior to res.send(/*HTML Code Here*/);
, here's what I propose:
A: Load the HTML file into a variable.
B: Load the insertion code into another variable.
C: Replace parts of A with B.
D: res.send(A);
This method has proven successful for me in Java, and occasionally in jQuery. However, I struggle to find the correct syntax to execute this in vanilla JavaScript.
If you can provide the necessary code to implement this concept, I will mark your response as the answer.
Note A looks something like:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--InsertionPoint-->
</body>
</html>
B resembles:
<p>Hello World</p>
In this example, the replacement keyword would be an empty string.
The resulting output sent in the res.send() function would be:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
=====================================