将 HTML 元素附加到 DOM 而不是 HTML 文本字符串
[英]Append HTML element to the DOM instead of a string of HTML text
问题描述
How can I add an element to a section rather than pure string?
如何将元素添加到部分而不是纯字符串？
I am trying to use append but that doesn't parse my HTML.我正在尝试使用append但它不会解析我的 HTML。
Maybe there's more AngularJS way of doing this I'm not aware of.也许还有更多我不知道的 AngularJS 方法。
document.getElementsByClassName("left-menu")[0].append( '<div class="adverts-container top30">' + '<div class="advert-carousel">' + 'Message' + '</div>' + '</div>' );
<section class="left-menu"></section>
5 个解决方案
解决方案1
5 2018-12-12 15:35:34
ParentNode.append() method inserts a set of Node objects or DOMString not the htmlString . ParentNode.append()方法插入一组Node对象或DOMString而不是htmlString 。
I do not know the angular way but you can use insertAdjacentHTML() to insert htmlString in pure JavaScript.我不知道角度方式，但您可以使用insertAdjacentHTML()在纯 JavaScript 中插入htmlString 。
document.getElementsByClassName("left-menu")[0].insertAdjacentHTML( 'beforeend', '<div class="adverts-container top30">' + '<div class="advert-carousel">' + 'Message' + '</div>' + '</div>' );
<section class="left-menu"></section>
解决方案2
4 2018-12-12 15:36:30
You should add HTML string in another element and append it to the left-menu element:您应该在另一个元素中添加 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
0 2018-12-12 15:36:54
There surely is.肯定有。 Generally, you DON'T wanna use jQ in AngularJS ever, and vanilla only for things not provided by AngularJS.通常，您永远不想在 AngularJS 中使用 jQ，并且仅对 AngularJS 未提供的东西使用 vanilla。 Here you are doing the binding to view.在这里，您正在执行绑定以查看。 That surely is something AngularJs offers, being the MVsomething framework.这肯定是 AngularJs 提供的东西，即 MVsomething 框架。
Reason?原因？ In nonspecific and simple terms, AngularJS has its own ways which ensure neat things like data binding etc if you don't obey by its rules you will most likely break the neat things you get.用非特定和简单的术语来说，AngularJS 有自己的方法来确保整洁的东西，比如数据绑定等，如果你不遵守它的规则，你很可能会破坏你得到的整洁的东西。
Here is a demo of how to do this in modern 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>
It is quite simple.这很简单。 You define HTML as a string, bind that to the scope like any other data you want accessible in the view and then simply use the ng-bind-html directive to inject HTML into element where you are using the directive.您将 HTML 定义为一个字符串，将其绑定到范围，就像您希望在视图中访问的任何其他数据一样，然后只需使用ng-bind-html指令将 HTML 注入到您使用该指令的元素中。
Neat, simple, safe and result will work as any other template statically written, you can band data from and to it with no additional hassle, the digest cycle will also work as usual.整洁、简单、安全，结果将像任何其他静态编写的模板一样工作，您可以毫不费力地从中提取数据或向其中添加数据，摘要周期也将照常工作。
解决方案4
-1 2018-12-12 15:33:09
I'm no expert on this one, but I don't believe append will parse HTML code.我不是这方面的专家，但我不相信 append 会解析 HTML 代码。 If you use document.createElement first to generate the element, you can then use append to add that created element to the DOM.如果您首先使用 document.createElement 生成元素，则可以使用 append 将创建的元素添加到 DOM。
解决方案5
-1 2018-12-12 15:43:53
Try this:试试这个：
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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.