How to append html file in javascript
I want to append html onclick and i know how to do it, but i want to add file path instead of html code in append method, here is my code
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.get("profile.html", function (data) {
$("#appendToThis").append(data);
});
});
</script>
</head>
<body>
<div id="appendToThis"></div>
</body>
</html>
Try with html method
$.get( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
https://api.jquery.com/jquery.get/
You can check do you get any result with
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.get("profile.html", function (data) {
alert(data); // <-- add this code
$("#appendToThis").html(data);
});
});
</script>
</head>
<body>
<div id="appendToThis"></div>
</body>
</html>
than your link is not ok "profile.html"
both files are in same folder
You need to write absolute link, not relative
absolute link? not know about it, please help :(
give it a complete path but not working
$.get( "C:\Users\Arslan\Desktop\JQuery-Practice\profile.html", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
i mean that you need to put your web link ... don't you have some local server on which you execute your script
thanks for help, now its working, its a problem of link
right now its importing it one time, can i do it multiple time? like on click event
my code is like this now,
$(document).ready(function(){
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
if (x < max_fields) {
x++;
$('.button').click(function(){
$.get('profile.html', function(result){
$('.import').html(result);
});
});
}
});
but its importing it only one time
what exactly do you want ... now on click you get result into tag with classname import
do you want to append ... than you change html method with append
$(document).ready(function(){
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
if (x < max_fields) {
x++;
$('.button').click(function(){
$.get('profile.html', function(result){
$('.import').append(result);
});
});
}
});
i want how many time user click this button, this file import here that many times
.append works for me :) , only one thing left in it
can we add copy and delete button also on each import?
remove is working fine, i am on clone now
clone can copy all the data in input fields from previous element to current element?
Please or to participate in this conversation.
