Question

168

AngularJS - add HTML element to dom in directive without jQuery

rated 0 times [ 173] [ 5] / answers: 1 / hits: 134587 / 11 Years ago, mon, october 21, 2013, 12:00:00

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).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tyreese

Add To Favorites

Follow

Total Points: 739

Total Questions: 95

Total Answers: 98

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

tyreese questions

1 React: Changed state in Child component. How to see the change in parent component?

Thu, May 12, 22, 00:00, 2 Years ago

1 Webpack module federation and react-router-dom

Sun, Jan 9, 22, 00:00, 2 Years ago

1 Avoid rerendering every component in list while updating only one in React

Sat, Dec 11, 21, 00:00, 3 Years ago

1 How to use Datatable in Reactjs when the data from API

Wed, Sep 2, 20, 00:00, 4 Years ago

1 JavaScript heap out of memory while build react app in docker container

Sat, Jul 11, 20, 00:00, 4 Years ago

View All

answered 11 Years ago frankiebobbyc · Accepted Answer

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/