如何将锚元素附加到div？

Question

我在我的 angularjs 项目上工作。

我的控制器中有这个字符串：

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

我的模板中有这个 div：

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

如何将上面的锚元素附加到 div 以使其可点击？

Answer 1

这也让我感到沮丧几次。 您应该能够像这样将字符串名称嵌入其中：

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

然后从那里调用它。

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

这里的问题是 angular 不想注入原始 HTML，对吗？ 所以你可以使用 $sce 来完成（ AngularJS：Insert HTML into view ）

但问题是，您能否将 URL 注入到 div 中已经存在的锚标记中？ 像这样：

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

然后在视图中使用它，只有在 URLFromController 为真时才显示它。

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

Answer 2

document.getElementById("wazeArea").appendChild(单引号''中的锚元素);

您可以在制作 html 字符串时使用单引号。 它可以在不需要转义字符的情况下允许双引号

Answer 3

// 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"));