Voeg html-element toe aan de DOM in plaats van de reeks html

Hoe kan ik een element aan een sectie toevoegen in plaats van een pure tekenreeks?

Ik probeer append() te gebruiken, maar dat interpreteert mijn HTML niet.

Misschien is er meer AngularJS-manier om dit te doen waar ik me niet van bewust ben.

<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 antwoord

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

Ik ken de hoekige manier niet, maar u kunt gebruiken insertAdjacentHTML() om htmlString in pure JavaScript in te voegen.

<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
toegevoegd

Je zou een HTML-string in een ander element moeten toevoegen en deze aan het linkermenu-element moeten toevoegen:

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
toegevoegd

Dat is het zeker. Over het algemeen wil je GEEN jQ in AngularJS ooit gebruiken, en vanille alleen voor dingen die niet door AngularJS worden geleverd. Hier doe je de binding om te bekijken. Dat is zeker iets dat AngularJs aanbiedt, omdat het het MVsomething framework is.

Reden? In niet-specifieke en eenvoudige bewoordingen, heeft AngularJS zijn eigen manieren die zorgen voor nette dingen zoals gegevensbinding, enz. Als u zich niet aan zijn regels houdt, zult u hoogstwaarschijnlijk de nette dingen breken die u krijgt.

Hier is een demo van hoe dit te doen in moderne 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>

Het is vrij eenvoudig. U definieert HTML als een tekenreeks, koppelt die aan het bereik zoals elke andere gegevens die u wilt openen in de weergave en gebruikt vervolgens eenvoudigweg de ng-bind-html -instructie om HTML te injecteren in een element waarin u de richtlijn gebruikt.

Nette, eenvoudige, veilige en resultaat zal werken als elke andere sjabloon statisch geschreven, u kunt gegevens van en naar het band zonder extra gedoe, de digest-cyclus zal ook werken zoals gewoonlijk.

0
toegevoegd
Vervolgens pakt u de hoekcontrole hoger in de hiërarchie in, dus het bevat het betreffende onderdeel of dit is helemaal geen AngularJS-vraag en de tag is niet nodig. Combineer de reguliere vanilla dom-combinatie met het richten van het bovenliggende knooppunt van DOM met een selector naar keuze en gebruik de methode append() om er HTML in te injecteren.
toegevoegd de auteur DanteTheSmith, de bron
Dat begrijp ik helemaal. Mijn probleem is dat 'left-menu' niet binnen de controller of sjabloon valt waarop ik deze opdracht schrijf. Het is helemaal hoger in de hiërarchie, daarom probeer ik in plaats daarvan deze oplossing.
toegevoegd de auteur LazioTibijczyk, de bron
Ik weet niet zeker hoe ik zou verwijzen naar de variabelen van de groot-grootouder en stel ze in om deze benadering te gebruiken.
toegevoegd de auteur LazioTibijczyk, de bron

Ik ben geen expert op dit gebied, maar ik geloof niet dat append HTML-code zal parseren. Als u eerst document.createElement gebruikt om het element te genereren, kunt u append gebruiken om dat gemaakte element aan de DOM toe te voegen.

0
toegevoegd

Probeer dit:

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
toegevoegd