将 HTML 元素而不是 HTML 文本字符串附加到 DOM答案

【问题标题】：Append HTML element to the DOM instead of a string of HTML text将 HTML 元素而不是 HTML 文本字符串附加到 DOM
【发布时间】：2021-05-29 14:45:05
【问题描述】：

如何将元素添加到部分而不是纯字符串？

我正在尝试使用 append，但它无法解析我的 HTML。

也许还有更多我不知道的 AngularJS 方法。

document.getElementsByClassName("left-menu")[0].append(
  '<div class="adverts-container top30">' +
    '<div class="advert-carousel">' +
      'Message' +
    '</div>' +
  '</div>'
);

&lt;section class="left-menu"&gt;&lt;/section&gt;

【问题讨论】：

方法在 Angular 应用程序中没有任何意义。你想解决什么更高层次的问题，典型的角度模板不起作用？
相关：Appending HTML string to the DOM.

标签： javascript html

【解决方案1】：

ParentNode.append() 方法插入一组 Node 对象或 DOMString 而不是 htmlString。

我不知道角度方式，但您可以使用insertAdjacentHTML() 在纯 JavaScript 中插入 htmlString。

document.getElementsByClassName("left-menu")[0].insertAdjacentHTML( 'beforeend',
  '<div class="adverts-container top30">' +
    '<div class="advert-carousel">' +
      'Message' +
    '</div>' +
  '</div>'
);

&lt;section class="left-menu"&gt;&lt;/section&gt;

【讨论】：

【解决方案2】：

您应该在另一个元素中添加 HTML 字符串并将其附加到左侧菜单元素：

var tmp=document.createElement('div');
tmp.innerHTML='<div class="adverts-container top30">' +'<div class="advert-carousel">' +'Message' +'</div>' +'</div>';
document.getElementsByClassName("left-menu")[0].appendChild(tmp.firstChild);

【讨论】：

【解决方案3】：

肯定有。一般来说，你永远不想在 AngularJS 中使用 jQ，而 vanilla 只用于 AngularJS 不提供的东西。在这里，您正在执行绑定以查看。这肯定是 AngularJs 提供的东西，即 MVsomething 框架。

原因？用非特定和简单的术语来说，AngularJS 有自己的方式来确保数据绑定等整洁的东西，如果你不遵守它的规则，你很可能会破坏你得到的整洁的东西。

这是一个演示如何在现代 AngularJS 中做到这一点：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <p ng-bind-html="myText"></p>

</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>

这很简单。您将 HTML 定义为字符串，将其绑定到范围，就像您希望在视图中访问的任何其他数据一样，然后只需使用 ng-bind-html 指令将 HTML 注入您正在使用该指令的元素中。

整洁、简单、安全且结果将与任何其他静态编写的模板一样工作，您可以轻松地将数据从其中绑定到它，摘要周期也将照常工作。

【讨论】：

我完全理解这一点。我的问题是“左菜单”不在我编写此作业的控制器或模板中。它在层次结构中完全更高，这就是我尝试这种解决方法的原因。
然后你要么在层次结构中将角度控制包装得更高，所以它包括有问题的部分，或者这根本不是 AngularJS 问题并且不需要标签。使用您选择的选择器定位 DOM 的父节点并使用 append() 方法将 HTML 注入其中，进行常规的 vanilla dom 组合。
不知道如何引用祖祖父母的变量并将它们设置为使用这种方法。
如果它们不在 AngularJS 应用程序范围内（使用 ng-app 包装），则不应使用此方法。他们是否应该是我无法回答的，这是一个架构问题，您必须自己回答或询问负责做出这些决定的人。如果它仍然在 AngularJS 应用程序范围之外，但您仍想从控制器内更改它们，只需使用 vanilla，获取 DOM 元素并附加到它。当您在应用程序的一部分上扩展 AngularJS 范围时要小心，这些应用程序并非设计为作为 AngularJS 应用程序的一部分（不是以“角度方式”编写），因为提到的原因。
这个功能被分配给我的模态框上的一个“预览”按钮。我不确定如何从模态访问我的左菜单控制器。正在考虑 $broadcast 或 $emit 如果其中任何一个可行的话。我想知道在这种情况下什么是好方法。左侧菜单控制器与模式无关，除了它们是同一主视图的 ui 视图。

【解决方案4】：

我不是这方面的专家，但我不相信 append 会解析 HTML 代码。如果先使用 document.createElement 生成元素，然后可以使用 append 将创建的元素添加到 DOM。

【讨论】：

【解决方案5】：

试试这个：

var el = document.createElement("div");
el.className = "adverts-container top30";
el.innerHTML = '<div class="advert-carousel">' +
                    'Message' +
                '</div>';
document.querySelectorAll(".left-menu")[0].append(el);

【讨论】：