How add element to div in angularjs?

Question

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.com/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>

Sorry, could you be more clear with your question? What element do you want to add to where? — timeiscoffee
– 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
– Emil, Commented Jun 30, 2015 at 5:31
Don't change the DOM in your controller, use a directive for that — Robin-Hoodie
– Robin-Hoodie, Commented Jun 30, 2015 at 5:38

RIYAJ KHAN · Accepted Answer · 2015-06-30 05:58:03Z

1

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

answered Jun 30, 2015 at 5:58

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

timeiscoffee · Accepted Answer · 2015-06-30 06:07:49Z

1

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.com/seyawemijo/edit?html,js,output

edited Jun 30, 2015 at 6:07

answered Jun 30, 2015 at 5:39

timeiscoffee

4583 silver badges14 bronze badges

2 Comments

Emil Over a year ago

thanks for your reply. i want to add element by id. because may be my form be complex.

timeiscoffee Over a year ago

@HJZ I updated the example to set id to the appended text input.

Icycool · Accepted Answer · 2015-06-30 07:12:15Z

1

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.com/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>

answered Jun 30, 2015 at 7:12

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Comments

Sreejith · Accepted Answer · 2015-06-30 06:08:00Z

0

Try this one

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

answered Jun 30, 2015 at 6:08

Sreejith

1668 bronze badges

Comments

Pruthviraj · Accepted Answer · 2015-06-30 06:42:48Z

0

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'));
   };
}

answered Jun 30, 2015 at 6:42

Pruthviraj

1,8553 gold badges15 silver badges18 bronze badges

Collectives™ on Stack Overflow

How add element to div in angularjs?

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related