i want to add element to div in angularjs. so write this code but not work correctly. thanks for your help :)

function TestController($scope) {
$scope.addElement = function(){
    var myElements = angular.element(document.querySelector('#form'));
    console.log(myElements);
    if(myElements.length == 0)
     alert("Not Find");
    else
        myElements.prepend( myElements[0].children[1]);
}
}

<script src=".2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
    <input type="button" ng-click="addElement()" value="add"></input>
    <div id="div">
      <input type="text" name="name">
   </div>
</div>

i want to add element to div in angularjs. so write this code but not work correctly. thanks for your help :)

function TestController($scope) {
$scope.addElement = function(){
    var myElements = angular.element(document.querySelector('#form'));
    console.log(myElements);
    if(myElements.length == 0)
     alert("Not Find");
    else
        myElements.prepend( myElements[0].children[1]);
}
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
    <input type="button" ng-click="addElement()" value="add"></input>
    <div id="div">
      <input type="text" name="name">
   </div>
</div>

• javascript
• html
• angularjs

• Sorry, could you be more clear with your question? What element do you want to add to where? – timeiscoffee Commented Jun 30, 2015 at 5:30
• it add element to div. when click on button it add input element on first child and add button put in second child. – Emil Commented Jun 30, 2015 at 5:31
• @timeiscoffee i want to add input element to div. – Emil Commented Jun 30, 2015 at 5:32
• 1 Don't change the DOM in your controller, use a directive for that – Robin-Hoodie Commented Jun 30, 2015 at 5:38
• Don't you need to add more buttons on the dom ? – Vineet Commented Jun 30, 2015 at 5:43

5 Answers 5

Here is what I have tried.

$scope.addElement = function(){
    var myElements = angular.element(document.querySelector('#form'));
    console.log(myElements)

   console.log(myElements[0].children[1])
    if(myElements.length == 0)
     alert("Not Find");
    else{
        html = angular.element(myElements[0].children[1]).clone();  
        myElements.append( html);
    }

You should use angular clone method.

EDIT.

Here it the Plunker

If I understood your question correctly, you want to append an input element to div on each ng-click?

You just need to target the div with jquery and append the element with it.

See example: http://jsbin./seyawemijo/edit?html,js,output

Often than not when you want to modify the DOM directly, there is a way to do it without.

"Thinking in Angular way"

function TestController($scope) {
  $scope.textArr = [];
  var count = 1;

  $scope.addElement = function() {
    var ele = {
      model: 'hello ' + count++
    }

    $scope.textArr.push(ele);
  }
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
  <input type="button" ng-click="addElement()" value="add" />

  <div ng-repeat="text in textArr">
    <input type="text" ng-model="text.model">
  </div>

  <div>{{textArr}}</div>
</div>

Try this one

   myElements.prepend(myElements[0].children[1].value);

I have altered the above solution to add other attributes(including id) to the input text element

var globalCntr = 0;
function TestController($scope) {
   $scope.addElement = function() {
        globalCntr ++;
        $('<input>',{
          type:'text',
          id:('inputText'+globalCntr)
       }).appendTo($('#target'));
   };
}