Додайте елемент html до DOM замість рядка html

Як я можу додати елемент до розділу, а не чистий?

Я намагаюся використовувати append (), але це не інтерпретує мій html.

Можливо, є ще один спосіб AngularJS зробити це я не знаю.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

</div> </div>

0

5 Відповіді

ParentNode.append() method inserts a set of Node objects or DOMString not the htmlString.

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

</div> </div>

4
додано

Ви повинні додати рядок 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
додано

Там, безумовно, є. Як правило, ви не хочете використовувати 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">

    


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

John Doe

";
});
</script>

Це досить просто. Ви визначаєте HTML як рядок, прив'язуйте його до області видимості, як і будь-які інші дані, які потрібно отримати в перегляді, а потім просто вкажіть директиву ng-bind-html , щоб вставити HTML в елемент, де ви використовуєте директиву.

Акуратний, простий, безпечний і результат буде працювати як будь-який інший шаблон, написаний статично, ви можете пов'язувати дані від і до неї без додаткових клопотів, дайджест-цикл також буде працювати як звичайно.

0
додано
Тоді ви або оберніть кутовий контроль вище в ієрархії, тому він включає в себе частину або це питання не AngularJS взагалі, і тег не потрібний. Виконайте звичайну комбінацію vanilla dom з націленням на батьківський вузол DOM за допомогою вибору, який ви обираєте, і за допомогою методу append (), щоб вставити HTML у нього.
додано Автор DanteTheSmith, джерело
Я цілком розумію це. Моя проблема - "ліве меню" не знаходиться в межах контролера або шаблону. Це повністю вище ієрархії, тому я намагаюся замінити цей обхідний шлях.
додано Автор LazioTibijczyk, джерело
Не впевнені, як я маю на увазі змінні великих дідусів і встановлювати їх для використання цього підходу.
додано Автор LazioTibijczyk, джерело

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

0
додано

Спробуйте це:

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
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram