AngularJS 是一个流行的前端框架，它允许我们使用指令 (directive) 来扩展 HTML，并为我们提供了很多便利。在某些情况下，我们需要通过指令向 DOM 中添加动态生成的 HTML 元素，而不借助第三方库 如jQuery。本文将介绍如何在 AngularJS 指令中实现这一目标。
添加元素的方式
在 AngularJS 中，我们可以使用 jqlite 或者 jQuery 来操作 DOM。jqlite 是一个轻量级的子集，包含了 jQuery 的核心功能。如果您不想使用 jQuery，那么 jqlite 可以满足您的需求。
使用 jqlite
jqlite 可以使用 angular.element 方法来访问 DOM 元素，该方法接受一个 CSS 选择器或 DOM 元素作为参数。我们可以使用 append() 方法向元素中添加内容，例如：
-- -------------------- ---- -------
------------------------------------------------ ---------- -
------ -
--------- ----
----- --------------- -------- ------ -
--- ---------- - ------------------------- ----------------
---------------------------
-
--
---在上面的例子中，我们创建了一个新的 <div> 元素，并将其添加到指令所在的元素中。
纯 JavaScript 方式
如果您不想使用 jqlite 或 jQuery，您也可以使用原生的 JavaScript 操作 DOM。但是，由于 AngularJS 会对元素进行编译，因此您需要在 $timeout 中执行操作，以确保元素已经被编译。例如：
-- -------------------- ---- -------
------------------------------------------------ ------------------ -
------ -
--------- ----
----- --------------- -------- ------ -
------------------- -
--- ---------- - ------------------------------
-------------------- - ---- ---------
-----------------------------------
---
-
--
---在上面的例子中，我们在 $timeout 回调函数中创建了一个新的 <div> 元素，并将其添加到指令所在的元素中。
示例代码
下面是一个完整的示例代码，演示了如何在指令中添加 HTML 元素到 DOM 中，无需使用 jQuery：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- --------- ---------------
------- ------------------------------------------------------------------------------
--------
----------------------- ---
------------------------- ------------------ -
------ -
--------- ----
----- --------------- -------- ------ -
-- ----- ------
--- ---------- - ------------------------- ------- -----------------
---------------------------
-- ---- ----------
------------------- -
--- ---------- - ------------------------------
-------------------- - ---- ------- --------------
-----------------------------------
---
-
--
---
---------
-------
------
-----------------------------
-------
-------在上面的代码中，我们创建了一个指令 myDirective，它向 DOM 中添加两个新元素。第一个元素是使用 jqlite 创建的，而第二个元素是使用纯 JavaScript 创建的。
总结
通过本文的介绍，我们学习了如何在 AngularJS 指令中向 DOM 中添加动态生成的 HTML 元素，无需使用 jQuery。我们了解到了 jqlite 和纯 JavaScript 操作 DOM 的方式，并提供了示例代码。这将为我们在开发过程中更好地控制 HTML 元素提供便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26505