AngularJS - add HTML element to dom in directive without jQuery

angularjs, html, javascript, jquery

Solution

Why not to try simple (but powerful) `html()` method:

iElement.html('<svg width="600" height="100" class="svg"></svg>');

Or `append` as an alternative:

iElement.append('<svg width="600" height="100" class="svg"></svg>');

And , of course , more cleaner way:

 var svg = angular.element('<svg width="600" height="100" class="svg"></svg>');
 iElement.append(svg);

Fiddle: http://jsfiddle.net/cherniv/AgGwK/

Problem

I have an AngularJS directive in which I want to add a svg tag to the current element of the directive. Right now I do this with the help of jQuery ``` link: function (scope, iElement, iAttrs) { var svgTag = $('<svg width="600" height="100" class="svg"></svg>'); $(svgTag).appendTo(iElement[0]); ... } ``` Yet I don't want the directive to depend on jQuery for this simple task. How would I accomplish the same with AngularJS means (or native JavaScript code).

Original source