title: Adding DOM elements dynamically on click of a button
body: <p>I want to add the DOM elements to a page on click of a button, i have written the code of the things to be added in a new html file called "newmission.html" as shown below.</p>
  
  <pre><code> &lt;div class="boxheader" ng-controller="edit_vision_missionCtrl"&gt;
      &lt;div style="float:right; clear:right; width:20%;"&gt;
          &lt;span&gt;&lt;a href="" style="" ng-click="deletemission(mission.id)"&gt;&lt;img src="assets/img/delete.png" style="width: 20%; height: 20%;"&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;span style="font-size: large; font-family: monospace; font-weight: bold;"&gt;EDIT MISSION NAME&lt;/span&gt;&lt;input type="text" value="Enter Mission Name" class="form-control" style="background-color: #e8e8e8"&gt;
  &lt;/div&gt;
  &lt;div style="padding-top: 10px;"&gt;
      &lt;span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;"&gt;EDIT MISSION POINTS&lt;/span&gt;&lt;br /&gt;
  &lt;/div&gt;
  &lt;div style="padding-top: 10px;"&gt;
      &lt;ul style="float: left; width: 100%;"&gt;
          &lt;li style="padding: 2px; width: 100%;"&gt;
              &lt;div style="float:right; clear:right; width:20%;"&gt;
                  &lt;span&gt;&lt;a href="" style=""&gt;&lt;img src="assets/img/delete.png" style="width: 20%; height: 20%;"&gt;&lt;/a&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="text" value="Enter Mission Point" class="form-control" style="background-color: #e8e8e8; width: 80%;"&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div style="padding-top: 35px;"&gt;
      &lt;a href=""&gt;&lt;img id="addmissionpoint" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am calling a function "addmission" which is in the controller, that adds the above html file contents in a div having id "toappend" but it is not working. I am using JQuery to add this, but angularJS or Javascript solutions will also be helpful. the function in the controller is shown below.</p>
  
  <pre><code>var newid = 0;
  $scope.addmission = function(){
      newid--;
      $.get("newmission.html", function(data) {
          $("#toappend").prepend(data);
      });
  };
  </code></pre>
  
  <p>This is the code from where i am calling the function.</p>
  
  <pre><code>&lt;div style="padding-top: 35px;"&gt;
          &lt;a href="" ng-click="addmission()"&gt;&lt;img id="addmission" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>