title: Loading external html files to div jquery
body: <p>I am trying to load an external html file into the div element.
  My jquery code is:</p>
  
  <pre><code>       $(document).ready(function()
         {
         $('#profile').on('click',function()
         {
             $.get('hn.html')
                 .success(function(data) {
                     $('#a').html(data);
                 });
  
         });
      });
      &lt;a  id="profile" href="#profile" &gt;
  </code></pre>
  
  <p>my hn.html file is : </p>
  
  <pre><code>       &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
         &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
         &lt;link href="css/style.css" rel="stylesheet"&gt;
         &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
         &lt;script src="bootstrap/js/tab.js"&gt;&lt;/script&gt;
         &lt;script src="bootstrap/js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
        &lt;script src="bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
        &lt;script&gt;
        $(document).ready(function() {
       $('#branch').append('&lt;option&gt;Select Branch&lt;/option&gt;');
       $('#branch').append('&lt;option&gt;ComputerScience&lt;/option&gt;');
       $('#branch').append('&lt;option&gt;Electrical&lt;/option&gt;');
       $('#branch').append('&lt;option&gt;Electronics and Communication&lt;/option&gt;');
       $('#branch').append('&lt;option&gt;Mechanical&lt;/option&gt;');
       $('#tier').append('&lt;option&gt;Select tier&lt;/option&gt;');
       $('#tier').append('&lt;option&gt;I&lt;/option&gt;');
       $('#tier').append('&lt;option&gt;II&lt;/option&gt;');
       $('#tier').append('&lt;option&gt;III&lt;/option&gt;');
       $('#type').append('&lt;option&gt;Type of Internship/Placement&lt;/option&gt;');
       $('#type').append('&lt;option&gt;6 weeks&lt;/option&gt;');
       $('#type').append('&lt;option&gt;6 months&lt;/option&gt;');
       $('#type').append('&lt;option&gt;Full Time&lt;/option&gt;');
  
  
       $('#branch').on('change', function () {
           var m = $("#branch option:selected").text();
  
           if (m == 'ComputerScience') {
               $('#skill1').append('&lt;option&gt;Select Skill 1&lt;/option&gt;');
               $('#skill1').append('&lt;option&gt;Algorithms&lt;/option&gt;');
               $('#skill1').append('&lt;option&gt;Data Structures&lt;/option&gt;');
               $('#skill1').append('&lt;option&gt;Web Development&lt;/option&gt;');
               $('#skill1').append('&lt;option&gt;Computer Networking&lt;/option&gt;');
               $('#skill1').append('&lt;option&gt;Database Management&lt;/option&gt;');
               $('#skill2').append('&lt;option&gt;Select Skill 2&lt;/option&gt;');
               $('#skill2').append('&lt;option&gt;Algorithms&lt;/option&gt;');
               $('#skill2').append('&lt;option&gt;Data Structures&lt;/option&gt;');
               $('#skill2').append('&lt;option&gt;Web Development&lt;/option&gt;');
               $('#skill2').append('&lt;option&gt;Computer Networking&lt;/option&gt;');
               $('#skill2').append('&lt;option&gt;Database Management&lt;/option&gt;');
               $('#skill3').append('&lt;option&gt;Select Skill 3&lt;/option&gt;');
               $('#skill3').append('&lt;option&gt;Algorithms&lt;/option&gt;');
               $('#skill3').append('&lt;option&gt;Data Structures&lt;/option&gt;');
               $('#skill3').append('&lt;option&gt;Web Development&lt;/option&gt;');
               $('#skill3').append('&lt;option&gt;Computer Networking&lt;/option&gt;');
               $('#skill3').append('&lt;option&gt;Database Management&lt;/option&gt;');
  
           }
       });
       $('#skill1').on('change', function ()
       {
           var n = $("#skill1 option:selected").text();
           var index = $('#skill1').get(0).selectedIndex;
           $('#skill2 option:eq(' + index + ')').remove();
           $('#skill3 option:eq(' + index + ')').remove();
  
  
  
  
  
  
       });
       $('#skill2').on('change', function ()
       {
           var p = $("#skill2 option:selected").text();
           var index1 = $('#skill2').get(0).selectedIndex;
  
           $('#skill3 option:eq(' + index1 + ')').remove();
  
  
  
  
  
  
       });
       $('#skill3').on('change', function ()
       {
           var r = $("#skill3 option:selected").text();
           var index2 = $('#skill3').get(0).selectedIndex;
  
  
  
  
  
  
  
  
  
  
  
       });
  
      $('#save1').on('click',function()
      {
         $.post('n.php',{'name': $('name').val(),'rollno': $('rollno').val(), 'mobile': $('mobile').val(), 'fblink': $('fblink').val(), 'linkedin': $('linkedin').val(),'skypelink': $('skypelink').val()},function(data) {
             if(data=='success') {
                 $('#myModal').modal('show');
  
             }
         });
  
      });
       $('#save2').on('click',function()
       {
           $.post('c.php',{'10percentage': $('10percentage').val(),'12percentage': $('12percentage').val(), 'cgpa': $('cgpa').val(), 'sgpa1': $('sgpa1').val(), 'sgpa2': $('sgpa2').val(),'sgpa3': $('sgpa3').val(), 'sgpa4': $('sgpa4').val(),'sgpa5': $('sgpa5').val()},function(data) {
               if(data=='success') {
                   $('#myModal1').modal('show');
  
               }
           });
  
       });
  
       $('#save3').on('click',function()
       {
           $.post('d.php',{'branch': $('branch').val(),'skill1': $('skill1').val(), 'skill2': $('skill2').val(), 'skill3': $('skill3').val(), 'tier': $('tier').val(),'type': $('type').val()},function(data) {
               if(data=='success') {
                   $('#myModal2').modal('show');
  
               }
           });
  
       });
   });
  
  &lt;/script&gt;
  
  
  
           &lt;div class="container"&gt;
           &lt;div class="row"&gt;
           &lt;div class="span12"&gt;
          &lt;div class="" id="loginModal"&gt;
            &lt;div class="modal-header"&gt;
  
              &lt;h3&gt;Create User Profile&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="well"&gt;
                &lt;ul class="nav nav-tabs"&gt;
                  &lt;li class="active"&gt;&lt;a href="#login" data-toggle="tab"&gt;Personal Details&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#create" data-toggle="tab"&gt;Educational Details&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="#skill" data-toggle="tab"&gt;Skills &lt;/a&gt; &lt;/li&gt;
                &lt;/ul&gt;
                &lt;div id="myTabContent" class="tab-content"&gt;
                  &lt;div class="tab-pane active in" id="login"&gt;
                    &lt;form class="form-horizontal" action='n.php' method="POST"&gt;
                      &lt;br&gt;
                      &lt;fieldset&gt;
                        &lt;div id="legend"&gt;
                          &lt;legend class=""&gt;Personal Details&lt;/legend&gt;
                        &lt;/div&gt;    
                        &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="name"&gt;Name&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="name" name="name" placeholder="Enter Name" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
  
                        &lt;div class="control-group"&gt;
                          &lt;!-- Password--&gt;
                          &lt;label class="control-label" for="rollno"&gt;Roll No&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="rollno" name="rollno" placeholder="Enter Roll No" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Password--&gt;
                          &lt;label class="control-label" for="mobile"&gt;Mobile No&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="mobile" name="mobile" placeholder="Enter Mobile No" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Password--&gt;
                          &lt;label class="control-label" for="fblink"&gt;Facebook link&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="fblink" name="fblink" placeholder="Enter Facebook Profile Link" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Password--&gt;
                          &lt;label class="control-label" for="linkedin"&gt;LinkedIn link&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="linkedin" name="linkedin" placeholder="Enter LinkedIn Profile Link" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Password--&gt;
                          &lt;label class="control-label" for="skypelink"&gt;Skype Link&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="skypelink" name="skypelink" placeholder="Enter Skype Profile Link" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
  
                        &lt;br&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Button --&gt;
                          &lt;div class="controls"&gt;
                            &lt;button class="btn btn-success btn-lg" name="save1" id="save1"&gt;Save&lt;/button&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/fieldset&gt;
                    &lt;/form&gt;                
                  &lt;/div&gt;
                  &lt;div class="tab-pane fade" id="create"&gt;
                    &lt;form id="tab"&gt;
                      &lt;br&gt;
                      &lt;fieldset&gt;
                        &lt;div id="legend"&gt;
                          &lt;legend class=""&gt;Educational Details&lt;/legend&gt;
                        &lt;/div&gt;  
                       &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="10percentage"&gt;Class 10 percentage&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="10percentage" name="10percentage" placeholder="Enter class 10 percentage" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="12percentage"&gt;Class 12 percentage&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="12percentage" name="12percentage" placeholder="Enter class 12 percentage" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="cgpa"&gt; Overall CGPA&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="cgpa" name="cgpa" placeholder="Enter CGPA" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="sgpa1"&gt;SGPA for Semester 1&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="sgpa1" name="sgpa1" placeholder="Enter SGPA for Semester 1" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="sgpa2"&gt;SGPA for Semester 2&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="sgpa2" name="sgpa2" placeholder="Enter SGPA for Semester 2" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="sgpa3"&gt;SGPA for Semester 3&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="sgpa3" name="sgpa3" placeholder="Enter SGPA for Semester 3" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="sgpa4"&gt;SGPA for Semester 4&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="sgpa4" name="sgpa4" placeholder="Enter SGPA for Semester 4" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="sgpa5"&gt;SGPA for Semester 5&lt;/label&gt;
                          &lt;div class="controls"&gt;
                            &lt;input type="text" id="sgpa5" name="sgpa5" placeholder="Enter SGPA for Semester 5" class="input-xlarge"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
  
  
  
  
  
  
  
                         &lt;br&gt;
                     &lt;div class="control-group"&gt;
                          &lt;!-- Button --&gt;
                          &lt;div class="controls"&gt;
                            &lt;button class="btn btn-success btn-lg" name="save2" id="save2"&gt;Save&lt;/button&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/fieldset&gt;
                    &lt;/form&gt;
                  &lt;/div&gt; 
                  &lt;div class="tab-pane fade" id="skill"&gt;
                    &lt;form id="tab"&gt;
                      &lt;br&gt;
                      &lt;fieldset&gt;
                        &lt;div id="legend"&gt;
                          &lt;legend class=""&gt;Skills&lt;/legend&gt;
                        &lt;/div&gt;  
                      &lt;div class="control-group"&gt;
                        &lt;label class="control-label"  for="branch"&gt;Branch&lt;/label&gt;
                          &lt;div class="controls"&gt;
              &lt;select name="branch"  class="form-control input-sm" id="branch" name="branch"  placeholder="Enter branch"&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="skill1"&gt;Skill 1&lt;/label&gt;
                          &lt;div class="controls"&gt;
                             &lt;select name="skill1"  class="form-control input-sm" id="skill1" name="skill1" placeholder="Enter skill 1"&gt;
                &lt;/select&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="skill2"&gt; Skill 2&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;select name="skill2"  class="form-control input-sm" id="skill2" name="skill2" placeholder="Enter skill 2"&gt;
                &lt;/select&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="skill3"&gt;Skill 3&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;select name="skill3"  class="form-control input-sm" id="skill3" name="skill3" placeholder="Enter skill 3"&gt;
                &lt;/select&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="tier"&gt;Preferred company tier&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;select name="tier"  class="form-control input-sm" id="tier" name="tier"  placeholder="tier"&gt;
                &lt;/select&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="control-group"&gt;
                          &lt;!-- Username --&gt;
                          &lt;label class="control-label"  for="type"&gt;Type of placement required&lt;/label&gt;
                          &lt;div class="controls"&gt;
                              &lt;select name="type"  class="form-control input-sm" id="type" name="type"  placeholder="Enter type of placement"&gt;
                &lt;/select&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
  
  
  
  
  
  
                      &lt;br&gt; 
                     &lt;div class="control-group"&gt;
                          &lt;!-- Button --&gt;
                          &lt;div class="controls"&gt;
                            &lt;button class="btn btn-success btn-lg pull-left" name="save3" id="save3"&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/fieldset&gt;
                    &lt;/form&gt;
                  &lt;/div&gt; 
  
  
              &lt;/div&gt;   
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
       &lt;div id="myModal1" class="modal fade"&gt;
        &lt;div class="modal-dialog"&gt;
           &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                   &lt;h4 class="modal-title"&gt;Success&lt;/h4&gt;
                   &lt;/div&gt;
                   &lt;div class="modal-body"&gt;
                   &lt;p&gt;Your Educational details have been successfully saved&lt;/p&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-success btn-lg" data-dismiss="modal"&gt;Ok&lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="myModal2" class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Success&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;You have successfully created your profile&lt;/p&gt;
  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-success btn-lg" data-dismiss="modal"&gt;Ok&lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it is not appending any data to my id of div when i am using get to extract. Please help me rectify my mistake.         </p>