For most developers that come from a jQuery background, AngularJS requires a major mental shift.
The primary reason for not doing jQuery-style DOM manipulations when working with AngularJS is that your Angular app will be unaware of any changes you make to the DOM with jQuery, and so you won't be able to tie those DOM elements into any model without getting into major Angular hackery.
As for best practices, I would recommend taking on a full set of tutorials like those at http://codeschool.com to help you make the leap from the "jQuery mindset" to the pure Angular mindset.
The best thing I ever did as an angular developer was to remove the jQuery library from my Angular projects altogether so I wasn't tempted to return to my old and buggy ways.
But to answer your question more specifically, there are many ways to add elements to the DOM in an Angular app. I'd suggest that you post some code and a specific question if you're trying to figure out how to do something the "Angular Way".
The perfect example is something like jQuery's append() and remove(). These have no place in an Angular app because any element that is appended by jQuery won't be visible to Angular's models, making them useless to the app itself.
So, instead of appending and removing with jQuery, you'll probably want to either render the DOM elements with an ng-repeat directive (if there are multiple similar DOM elements that need to be appended) and add DOM elements by using ng-click to add data to the object that the ng-repeat directive is tied to, or if there aren't multiple similar elements to append, maybe you just need to use ng-show or ng-if to only render the DOM element after the click.
Here's an example of these two methods:
http://plnkr.co/edit/4MSOoTrGGom2DpGj00x4?p=preview
<body ng-controller="MainCtrl">
<p ng-repeat="name in names">{{name}}</p>
<form ng-submit="addName(newName)">
<input ng-model="newName" type="text"/>
<button type="submit">Add Name</button>
</form>
<br>
<br>
<h1 ng-show="showHeader">Header Element</h1>
<button ng-show="!showHeader" ng-click="showHeader = !showHeader">Show Header</button>
<button ng-show="showHeader" ng-click="showHeader = !showHeader">Hide Header</button>
</body>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.names = ['Ramm', 'John', 'Keith', 'Susan', 'Janice'];
$scope.addName = function(newName){
$scope.names.push(newName);
};
});
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
