JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<div ng-controller='Controller' ng-app>
    <div style='border: 1px solid blue;'>
        <p id='Target' style='border: 1px solid blue;'>Target</p>
    </div>
    <p>
        Add text
        <input type='text' ng-model='text' />
        <input type='button' value='Add Before' ng-click='addBefore()' />
        <input type='button' value='Add After' ng-click='addAfter()' />
    </p>
</div>

JavaScript

//add the before function to the angular.element prototype
angular.element.prototype.before = function(el) {
    
    //if element was passed in as a string then turn it into an element
    if (typeof el === 'string') el = angular.element(el);
    
    //make sure that this angular.element has an element
    if (this.length > 0) {
        
        //access the dom node for this element and use the dom function
        //to add the new element.
        //See: https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore
        this[0].parentNode.insertBefore(el[0], this[0]);
        
    }
}

function Controller($scope) {
    var target;
    
    //get first and second paragraphs to put paragraphs before and after
    target = angular.element(document.getElementById('Target'));
    
    $scope.text = 'Hello, World!';

    $scope.addBefore = function() {
        target.before('<p>' + $scope.text + '</p>');
    }
    
    $scope.addAfter = function() {
        target.after('<p>' + $scope.text + '</p>');
    }
}