[{"data":1,"prerenderedAt":890},["ShallowReactive",2],{"article:angularjs-dom-manipulation-jqlite-324":3,"\u002Fblog\u002Fangularjs-dom-manipulation-jqlite-324-surround":879},{"id":4,"title":5,"author":6,"body":7,"date":867,"description":868,"extension":869,"image":870,"meta":871,"minRead":71,"navigation":340,"path":872,"published":873,"seo":874,"stem":875,"tags":876,"__hash__":878},"blog\u002Fblog\u002Fangularjs-dom-manipulation-jqlite-324.md","AngularJS DOM manipulation with jqLite","Baljeet Singh",{"type":8,"value":9,"toc":863},"minimark",[10,14,318,514,517,530,533,642,645,650,833,838,845,850,856,859],[11,12,13],"p",{},"In this tutorial, I will be talking about how to manipulate DOM using jqLite. jqLite is a subset of jquery which allows angular to manipulate DOM. Let's start by creating the basic structure. Create two files described below:",[15,16,22],"pre",{"className":17,"code":18,"filename":19,"language":20,"meta":21,"style":21},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Ctitle>AngularJS DOM manipulation with jqLite\u003C\u002Ftitle>\n    \u003Clink\n      rel=\"stylesheet\"\n      href=\"\u002F\u002Fnetdna.bootstrapcdn.com\u002Fbootstrap\u002F3.0.3\u002Fcss\u002Fbootstrap.min.css\"\n    \u002F>\n    \u003Cscript src=\"https:\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fangularjs\u002F1.2.24\u002Fangular.min.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"app.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv class=\"container\" ng-app=\"myApp\">\n      \u003Cmy-directive>\u003C\u002Fmy-directive>\n    \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","index.html","js","",[23,24,25,41,69,80,104,124,132,148,163,169,196,220,230,240,274,290,300,309],"code",{"__ignoreMap":21},[26,27,30,34,38],"span",{"class":28,"line":29},"line",1,[26,31,33],{"class":32},"sMK4o","\u003C!",[26,35,37],{"class":36},"sTEyZ","DOCTYPE html",[26,39,40],{"class":32},">\n",[26,42,44,47,51,55,58,61,65,67],{"class":28,"line":43},2,[26,45,46],{"class":32},"\u003C",[26,48,50],{"class":49},"swJcz","html",[26,52,54],{"class":53},"spNyl"," lang",[26,56,57],{"class":32},"=",[26,59,60],{"class":32},"\"",[26,62,64],{"class":63},"sfazB","en",[26,66,60],{"class":32},[26,68,40],{"class":32},[26,70,72,75,78],{"class":28,"line":71},3,[26,73,74],{"class":32},"  \u003C",[26,76,77],{"class":49},"head",[26,79,40],{"class":32},[26,81,83,86,89,92,94,96,99,101],{"class":28,"line":82},4,[26,84,85],{"class":32},"    \u003C",[26,87,88],{"class":49},"meta",[26,90,91],{"class":53}," charset",[26,93,57],{"class":32},[26,95,60],{"class":32},[26,97,98],{"class":63},"UTF-8",[26,100,60],{"class":32},[26,102,103],{"class":32}," \u002F>\n",[26,105,107,109,112,115,117,120,122],{"class":28,"line":106},5,[26,108,85],{"class":32},[26,110,111],{"class":49},"title",[26,113,114],{"class":32},">",[26,116,5],{"class":36},[26,118,119],{"class":32},"\u003C\u002F",[26,121,111],{"class":49},[26,123,40],{"class":32},[26,125,127,129],{"class":28,"line":126},6,[26,128,85],{"class":32},[26,130,131],{"class":49},"link\n",[26,133,135,138,140,142,145],{"class":28,"line":134},7,[26,136,137],{"class":53},"      rel",[26,139,57],{"class":32},[26,141,60],{"class":32},[26,143,144],{"class":63},"stylesheet",[26,146,147],{"class":32},"\"\n",[26,149,151,154,156,158,161],{"class":28,"line":150},8,[26,152,153],{"class":53},"      href",[26,155,57],{"class":32},[26,157,60],{"class":32},[26,159,160],{"class":63},"\u002F\u002Fnetdna.bootstrapcdn.com\u002Fbootstrap\u002F3.0.3\u002Fcss\u002Fbootstrap.min.css",[26,162,147],{"class":32},[26,164,166],{"class":28,"line":165},9,[26,167,168],{"class":32},"    \u002F>\n",[26,170,172,174,177,180,182,184,187,189,192,194],{"class":28,"line":171},10,[26,173,85],{"class":32},[26,175,176],{"class":49},"script",[26,178,179],{"class":53}," src",[26,181,57],{"class":32},[26,183,60],{"class":32},[26,185,186],{"class":63},"https:\u002F\u002Fajax.googleapis.com\u002Fajax\u002Flibs\u002Fangularjs\u002F1.2.24\u002Fangular.min.js",[26,188,60],{"class":32},[26,190,191],{"class":32},">\u003C\u002F",[26,193,176],{"class":49},[26,195,40],{"class":32},[26,197,199,201,203,205,207,209,212,214,216,218],{"class":28,"line":198},11,[26,200,85],{"class":32},[26,202,176],{"class":49},[26,204,179],{"class":53},[26,206,57],{"class":32},[26,208,60],{"class":32},[26,210,211],{"class":63},"app.js",[26,213,60],{"class":32},[26,215,191],{"class":32},[26,217,176],{"class":49},[26,219,40],{"class":32},[26,221,223,226,228],{"class":28,"line":222},12,[26,224,225],{"class":32},"  \u003C\u002F",[26,227,77],{"class":49},[26,229,40],{"class":32},[26,231,233,235,238],{"class":28,"line":232},13,[26,234,74],{"class":32},[26,236,237],{"class":49},"body",[26,239,40],{"class":32},[26,241,243,245,248,251,253,255,258,260,263,265,267,270,272],{"class":28,"line":242},14,[26,244,85],{"class":32},[26,246,247],{"class":49},"div",[26,249,250],{"class":53}," class",[26,252,57],{"class":32},[26,254,60],{"class":32},[26,256,257],{"class":63},"container",[26,259,60],{"class":32},[26,261,262],{"class":53}," ng-app",[26,264,57],{"class":32},[26,266,60],{"class":32},[26,268,269],{"class":63},"myApp",[26,271,60],{"class":32},[26,273,40],{"class":32},[26,275,277,280,284,286,288],{"class":28,"line":276},15,[26,278,279],{"class":32},"      \u003C",[26,281,283],{"class":282},"sBMFI","my-directive",[26,285,191],{"class":32},[26,287,283],{"class":282},[26,289,40],{"class":32},[26,291,293,296,298],{"class":28,"line":292},16,[26,294,295],{"class":32},"    \u003C\u002F",[26,297,247],{"class":49},[26,299,40],{"class":32},[26,301,303,305,307],{"class":28,"line":302},17,[26,304,225],{"class":32},[26,306,237],{"class":49},[26,308,40],{"class":32},[26,310,312,314,316],{"class":28,"line":311},18,[26,313,119],{"class":32},[26,315,50],{"class":49},[26,317,40],{"class":32},[15,319,321],{"className":17,"code":320,"filename":211,"language":20,"meta":21,"style":21},"'use strict';\n\nvar myApp = angular.module('myApp', []);\n\nmyApp.directive('myDirective', function () {\n  return {\n    template: '\u003Ch1>This is myDirective\u003C\u002Fh1>',\n    restrict: 'E',\n    replace: true,\n    link: function (scope, element, attrs) {},\n  };\n});\n",[23,322,323,336,342,379,383,412,420,439,455,468,500,505],{"__ignoreMap":21},[26,324,325,328,331,333],{"class":28,"line":29},[26,326,327],{"class":32},"'",[26,329,330],{"class":63},"use strict",[26,332,327],{"class":32},[26,334,335],{"class":32},";\n",[26,337,338],{"class":28,"line":43},[26,339,341],{"emptyLinePlaceholder":340},true,"\n",[26,343,344,347,350,352,355,358,362,365,367,369,371,374,377],{"class":28,"line":71},[26,345,346],{"class":53},"var",[26,348,349],{"class":36}," myApp ",[26,351,57],{"class":32},[26,353,354],{"class":36}," angular",[26,356,357],{"class":32},".",[26,359,361],{"class":360},"s2Zo4","module",[26,363,364],{"class":36},"(",[26,366,327],{"class":32},[26,368,269],{"class":63},[26,370,327],{"class":32},[26,372,373],{"class":32},",",[26,375,376],{"class":36}," [])",[26,378,335],{"class":32},[26,380,381],{"class":28,"line":82},[26,382,341],{"emptyLinePlaceholder":340},[26,384,385,387,389,392,394,396,399,401,403,406,409],{"class":28,"line":106},[26,386,269],{"class":36},[26,388,357],{"class":32},[26,390,391],{"class":360},"directive",[26,393,364],{"class":36},[26,395,327],{"class":32},[26,397,398],{"class":63},"myDirective",[26,400,327],{"class":32},[26,402,373],{"class":32},[26,404,405],{"class":53}," function",[26,407,408],{"class":32}," ()",[26,410,411],{"class":32}," {\n",[26,413,414,418],{"class":28,"line":126},[26,415,417],{"class":416},"s7zQu","  return",[26,419,411],{"class":32},[26,421,422,425,428,431,434,436],{"class":28,"line":134},[26,423,424],{"class":49},"    template",[26,426,427],{"class":32},":",[26,429,430],{"class":32}," '",[26,432,433],{"class":63},"\u003Ch1>This is myDirective\u003C\u002Fh1>",[26,435,327],{"class":32},[26,437,438],{"class":32},",\n",[26,440,441,444,446,448,451,453],{"class":28,"line":150},[26,442,443],{"class":49},"    restrict",[26,445,427],{"class":32},[26,447,430],{"class":32},[26,449,450],{"class":63},"E",[26,452,327],{"class":32},[26,454,438],{"class":32},[26,456,457,460,462,466],{"class":28,"line":165},[26,458,459],{"class":49},"    replace",[26,461,427],{"class":32},[26,463,465],{"class":464},"sfNiH"," true",[26,467,438],{"class":32},[26,469,470,473,475,477,480,484,486,489,491,494,497],{"class":28,"line":171},[26,471,472],{"class":360},"    link",[26,474,427],{"class":32},[26,476,405],{"class":53},[26,478,479],{"class":32}," (",[26,481,483],{"class":482},"sHdIc","scope",[26,485,373],{"class":32},[26,487,488],{"class":482}," element",[26,490,373],{"class":32},[26,492,493],{"class":482}," attrs",[26,495,496],{"class":32},")",[26,498,499],{"class":32}," {},\n",[26,501,502],{"class":28,"line":198},[26,503,504],{"class":32},"  };\n",[26,506,507,510,512],{"class":28,"line":222},[26,508,509],{"class":32},"}",[26,511,496],{"class":36},[26,513,335],{"class":32},[11,515,516],{},"Open index.html in the browser, the output will be \"This is myDirective\" in heading1.",[518,519,521,522,496],"h2",{"id":520},"angulars-jqlite-source-angulardocs","Angular's jqLite (source: ",[523,524,529],"a",{":target":525,"href":526,"rel":527},"\\_blank","https:\u002F\u002Fdocs.angularjs.org\u002Fapi\u002Fng\u002Ffunction\u002Fangular.element",[528],"nofollow","AngularDocs",[11,531,532],{},"jqLite provides only the following jQuery methods:",[534,535,536,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639],"ul",{},[537,538,539],"li",{},"addClass()",[537,541,542],{},"after()",[537,544,545],{},"append()",[537,547,548],{},"attr()",[537,550,551],{},"bind() – Does not support namespaces, selectors or eventData",[537,553,554],{},"children() – Does not support selectors",[537,556,557],{},"clone()",[537,559,560],{},"contents()",[537,562,563],{},"css()",[537,565,566],{},"data()",[537,568,569],{},"detach()",[537,571,572],{},"empty()",[537,574,575],{},"eq()",[537,577,578],{},"find() – Limited to lookups by tag name",[537,580,581],{},"hasClass()",[537,583,584],{},"html()",[537,586,587],{},"next() – Does not support selectors",[537,589,590],{},"on() – Does not support namespaces, selectors or eventData",[537,592,593],{},"off() – Does not support namespaces or selectors",[537,595,596],{},"one() – Does not support namespaces or selectors",[537,598,599],{},"parent() – Does not support selectors",[537,601,602],{},"prepend()",[537,604,605],{},"prop()",[537,607,608],{},"ready()",[537,610,611],{},"remove()",[537,613,614],{},"removeAttr()",[537,616,617],{},"removeClass()",[537,619,620],{},"removeData()",[537,622,623],{},"replaceWith()",[537,625,626],{},"text()",[537,628,629],{},"toggleClass()",[537,631,632],{},"triggerHandler() – Passes a dummy event object to handlers.",[537,634,635],{},"unbind() – Does not support namespaces",[537,637,638],{},"val()",[537,640,641],{},"wrap()",[11,643,644],{},"In the case of angular jqLite, angular.element is used as a alias for jQuery or $ as in the jQuery. Let's take a look at some of the functions jqLite supports, replace the code corresponding to the function with app.js.",[646,647,648],"blockquote",{},[11,649,626],{},[15,651,653],{"className":17,"code":652,"language":20,"meta":21,"style":21},"'use strict';\n\nvar myApp = angular.module('myApp', []);\n\nmyApp.directive('myDirective', function () {\n  return {\n    template: '\u003Ch1>This is myDirective\u003C\u002Fh1>',\n    restrict: 'E',\n    replace: true,\n    link: function (scope, element, attrs) {\n      element.text('this is the myDirective directive');\n    },\n  };\n});\n",[23,654,655,665,669,697,701,725,731,745,759,769,793,816,821,825],{"__ignoreMap":21},[26,656,657,659,661,663],{"class":28,"line":29},[26,658,327],{"class":32},[26,660,330],{"class":63},[26,662,327],{"class":32},[26,664,335],{"class":32},[26,666,667],{"class":28,"line":43},[26,668,341],{"emptyLinePlaceholder":340},[26,670,671,673,675,677,679,681,683,685,687,689,691,693,695],{"class":28,"line":71},[26,672,346],{"class":53},[26,674,349],{"class":36},[26,676,57],{"class":32},[26,678,354],{"class":36},[26,680,357],{"class":32},[26,682,361],{"class":360},[26,684,364],{"class":36},[26,686,327],{"class":32},[26,688,269],{"class":63},[26,690,327],{"class":32},[26,692,373],{"class":32},[26,694,376],{"class":36},[26,696,335],{"class":32},[26,698,699],{"class":28,"line":82},[26,700,341],{"emptyLinePlaceholder":340},[26,702,703,705,707,709,711,713,715,717,719,721,723],{"class":28,"line":106},[26,704,269],{"class":36},[26,706,357],{"class":32},[26,708,391],{"class":360},[26,710,364],{"class":36},[26,712,327],{"class":32},[26,714,398],{"class":63},[26,716,327],{"class":32},[26,718,373],{"class":32},[26,720,405],{"class":53},[26,722,408],{"class":32},[26,724,411],{"class":32},[26,726,727,729],{"class":28,"line":126},[26,728,417],{"class":416},[26,730,411],{"class":32},[26,732,733,735,737,739,741,743],{"class":28,"line":134},[26,734,424],{"class":49},[26,736,427],{"class":32},[26,738,430],{"class":32},[26,740,433],{"class":63},[26,742,327],{"class":32},[26,744,438],{"class":32},[26,746,747,749,751,753,755,757],{"class":28,"line":150},[26,748,443],{"class":49},[26,750,427],{"class":32},[26,752,430],{"class":32},[26,754,450],{"class":63},[26,756,327],{"class":32},[26,758,438],{"class":32},[26,760,761,763,765,767],{"class":28,"line":165},[26,762,459],{"class":49},[26,764,427],{"class":32},[26,766,465],{"class":464},[26,768,438],{"class":32},[26,770,771,773,775,777,779,781,783,785,787,789,791],{"class":28,"line":171},[26,772,472],{"class":360},[26,774,427],{"class":32},[26,776,405],{"class":53},[26,778,479],{"class":32},[26,780,483],{"class":482},[26,782,373],{"class":32},[26,784,488],{"class":482},[26,786,373],{"class":32},[26,788,493],{"class":482},[26,790,496],{"class":32},[26,792,411],{"class":32},[26,794,795,798,800,803,805,807,810,812,814],{"class":28,"line":198},[26,796,797],{"class":36},"      element",[26,799,357],{"class":32},[26,801,802],{"class":360},"text",[26,804,364],{"class":49},[26,806,327],{"class":32},[26,808,809],{"class":63},"this is the myDirective directive",[26,811,327],{"class":32},[26,813,496],{"class":49},[26,815,335],{"class":32},[26,817,818],{"class":28,"line":222},[26,819,820],{"class":32},"    },\n",[26,822,823],{"class":28,"line":232},[26,824,504],{"class":32},[26,826,827,829,831],{"class":28,"line":242},[26,828,509],{"class":32},[26,830,496],{"class":36},[26,832,335],{"class":32},[646,834,835],{},[11,836,837],{},"prepend(), append()",[15,839,843],{"className":840,"code":842,"language":802},[841],"language-text","'use strict';\n\nvar myApp = angular.module('myApp', []);\n\nmyApp.directive('myDirective', function () {\n    return {\n      template: '\u003Ch1>This is myDirective\u003C\u002Fh1>',\n      restrict: 'E',\n      replace: true,\n      link: function (scope, element, attrs) {\n            element.prepend('this is prepend text \u003Chr\u002F>');\n            element.append('\u003Chr\u002F> this is append text');\n         }\n     };\n  });\n",[23,844,842],{"__ignoreMap":21},[646,846,847],{},[11,848,849],{},"bind(), addClass(), toggleClass()",[15,851,854],{"className":852,"code":853,"language":802},[841],"'use strict';\n\nvar myApp = angular.module('myApp', []);\n\nmyApp.directive('myDirective', function () {\n    return {\n      template: '\u003Ch1>This is myDirective\u003C\u002Fh1>',\n      restrict: 'E',\n      replace: true,\n      link: function (scope, element, attrs) {\n            element.addClass('btn btn-primary');\n            element.bind('click', function(event) {\n                element.toggleClass('btn btn-primary');\n\n            });\n         }\n     };\n  });\n",[23,855,853],{"__ignoreMap":21},[11,857,858],{},"Similarly, all the other functions can be used like this. Also, if you want you can use complete jQuery library and use it with Angular. Angular & jQuery works well with each other.",[860,861,862],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":21,"searchDepth":43,"depth":43,"links":864},[865],{"id":520,"depth":43,"text":866},"Angular's jqLite (source: AngularDocs)","2014-09-13","In this article we will see how we can have DOM manipulation inside AngularJS using jqLite","md",null,{},"\u002Fblog\u002Fangularjs-dom-manipulation-jqlite-324",false,{"title":5,"description":868},"blog\u002Fangularjs-dom-manipulation-jqlite-324",[877],"Web Development","Wuo-stgHsZl9tUuJJKLGD1kQVrKbyR3W7rabhQ8F2eE",[880,885],{"title":881,"path":882,"stem":883,"description":884,"children":-1},"Adding Server Side Rendering (SSR) to Angular App using NestJS","\u002Fblog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs","blog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs","In this article we will see how we can add Server Side Rendering (SSR) to Angular App using NestJS",{"title":886,"path":887,"stem":888,"description":889,"children":-1},"AngularJS GET ajax request with PHP (Fetching data)","\u002Fblog\u002Fangularjs-get-ajax-request-php-fetching-data-320","blog\u002Fangularjs-get-ajax-request-php-fetching-data-320","In this article we will see how can make GET request inside AngularJS using PHP",1775568353204]