How to append anchor element to div?

Question

I work on my angularjs project.

I have this string in my controller:

"<a href="http://waze.to/?navigate=yes&ll=72.0274, 564.7814"  target="_blank">Open In Waze</a>"

And I have this div in my template:

 <div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)"><i class="fa fa-car" aria-hidden="true"></div>

How can append anchor element above to div to make it clickable?

You want to make the whole div clickable, or you want to add the link inside the div? The later would be just something like $("#wazeArea).html(string); — Danmoreng, Sep 27 '16 at 15:36
Thank you for the answer I brief updated mu question can you see it? — Michael, Sep 27 '16 at 15:44
Incidentally you may want to encode that URL in the href of your `` element. — David Thomas, Sep 27 '16 at 15:44

score 1 · Answer 1 · edited May 23 '17 at 12:15

This frustrated me a few times as well. You should be able to just embed the string name into it like this:

var htmlStringFromController = "<a href="http://waze.to/?navigate=yes&ll=72.0274, 564.7814"  target="_blank">Open In Waze</a>";

And then call it from there.

<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)">{{htmlStringFromController}}</div>

The problem here is that angular doesn't want to inject raw HTML, right? So you can use $sce to accomplish that (AngularJS : Insert HTML into view)

But the question is, could you just inject the URL into an anchor tag that already exists in the div? Like this:

// controller code:
var URLFromController = "http://waze.to/?navigate=yes&ll=72.0274, 564.7814";

And then use this in the view, only displaying it if URLFromController is truthy.

<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)">
    <a ng-if="URLFromController" href="{{URLFromController}}" target="_blank">Open in Waze</a>
</div>

I agree, if it's an angular app, do it the angular way!! – big_water Sep 27 '16 at 16:01 — big_water, Sep 27 '16 at 16:01

AB Udhay · Answer 2 · 2016-09-27T16:04:50.497

0

document.getElementById("wazeArea").appendChild(Anchor element in single quotes ' ');

You can use single quotes while making html string. It can allow double quotes inside that without need of escape characters

edited Sep 27 '16 at 16:04

answered Sep 27 '16 at 15:48

AB Udhay

643
4
9

score 0 · Answer 3 · answered Sep 27 '16 at 15:51

0

// 1. get the parent of the div
// 2. append the anchor to it
$("#wazeArea").parent().append($(string));
// 3. move the div inside of the anchor by appending it
$("#id_of_a").append($("wazeArea"));

answered Sep 27 '16 at 15:51

Danmoreng

2,367
1
19
32

How to append anchor element to div?

3 Answers3