JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<div ng-app>
<span id="mySpan">A span...</span>

    <br>
    <br>
    <button id="native">Color using document.querySelector</button>
    <br>
    <button id="angular">Color using angular.element</button>
    <br>
    <button id="mix">Color using angular.element and document.querySelector</button>
</div>

CSS

span {
    border: solid 1px #ccc;
    padding: 5px;
}

JavaScript

document.querySelector('#native').onclick = function () {
    document.querySelector('#mySpan').style.backgroundColor = 'red';
};

document.querySelector('#angular').onclick = function () {
    // Works only if jQuery is present
    // Without jQuery, it gives an error:
    // 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element'
    angular.element('#mySpan').css({
        backgroundColor: '#99ff99'
    });
};

document.querySelector('#mix').onclick = function () {
    angular.element(document.querySelector('#mySpan')).css({
        backgroundColor: '#9999ff'
    });
};