Greetings everyone, I have recently delved into the world of coding and am currently working on a project for my course to streamline access to information and data in my daily life.
So far, I have created a single HTML file and two additional external HTML files within the Appends folder. I am using these external files to append a div with the id #AD to the original HTML file's #wrapper div.
The issue arises when I try to combine the content of the two external HTML files into one and include two div elements inside a single external HTML file. Despite my attempts to solve this by using methods like find and filter, nothing seems to work and I cannot pinpoint what may be going wrong.
This is the current code snippet that has been successful in appending the div from the external HTML file to the wrapper:
$.ajax({
url: "appends/ADDiv.html",
dataType: 'html',
success: function (data) {
$('#wrapper').append(data);
}
});
It should also be noted that the div elements are appended based on menu selections; when the AD menu is clicked, the related div is appended, and the same goes for the CS menu.
For reference, here are snippets of the main index file and the external HTML file content:
Index File:
<ul>
<li><a href="javascript:showAD();">AD</a></li>
<li><a href="javascript:showCS();">CS</a></li>
</ul>
<div id='wrapper'> </div>
External HTML File:
<div id='AD'>
<input type="button" value="Generate"/&>
</div>
<div id='CS'>
<input type="button" value="Generate2"/>
</div>
In one of my recent attempts, the following code was implemented but with limited success - pointing to the second div appends only one element, while pointing to the first div appends all the divs:
$.ajax({
dataType: 'html',
success: function (data) {
$('#wrapper').append($('<div>').load('appends/ADDiv.html #AD')); },
});