Добавить элемент HTML в DOM вместо строки HTML - PullRequest
0 голосов
/ 12 декабря 2018

Как добавить элемент в раздел, а не чистую строку?

Я пытаюсь использовать append (), но это не интерпретирует мой html.

Может быть, есть еще 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 ]

0 голосов
/ 12 декабря 2018

Попробуйте это:

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);
0 голосов
/ 12 декабря 2018

Конечно, есть.Как правило, вы никогда не хотите использовать jQ в AngularJS, и ваниль только для вещей, не предоставляемых 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 в элемент, в котором вы используете директиву.

Аккуратный, простой, безопасный и результат будет работать как любой другой статически написанный шаблон, вы можете объединять данные и без него, цикл дайджеста также будет работать как обычно.

0 голосов
/ 12 декабря 2018

ParentNode.append () метод вставляет набор узлов объектов или DOMString , а не htmlString .

Я не знаю угловой путь, но вы можете использовать insertAdjacentHTML() для вставки htmlString в чистый JavaScript.

document.getElementsByClassName("left-menu")[0].insertAdjacentHTML( 'beforeend',
  '<div class="adverts-container top30">' +
    '<div class="advert-carousel">' +
      'Message' +
    '</div>' +
  '</div>'
);
        
<section class="left-menu"></section>
0 голосов
/ 12 декабря 2018

Вы должны добавить строку 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);
0 голосов
/ 12 декабря 2018

Я не эксперт по этому вопросу, но я не верю, что append будет анализировать HTML-код.Если вы сначала используете document.createElement для генерации элемента, вы можете использовать append для добавления этого созданного элемента в DOM.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...