diff --git a/common/lib/xmodule/xmodule/js/src/poll/poll_main.js b/common/lib/xmodule/xmodule/js/src/poll/poll_main.js
index e97a1356f1..e823ce0a3f 100644
--- a/common/lib/xmodule/xmodule/js/src/poll/poll_main.js
+++ b/common/lib/xmodule/xmodule/js/src/poll/poll_main.js
@@ -1,5 +1,5 @@
 (function(requirejs, require, define) {
-    define('PollMain', [], function() {
+    define('PollMain', ['edx-ui-toolkit/js/utils/html-utils'], function(HtmlUtils) {
         PollMain.prototype = {
 
             showAnswerGraph: function(poll_answers, total) {
@@ -23,7 +23,8 @@
                     percentValue = (numValue / totalValue) * 100.0;
 
                     _this.answersObj[index].statsEl.show();
-                    _this.answersObj[index].numberEl.html('' + value + ' (' + percentValue.toFixed(1) + '%)');
+                    // eslint-disable-next-line max-len
+                    _this.answersObj[index].numberEl.html(HtmlUtils.HTML('' + value + ' (' + percentValue.toFixed(1) + '%)').toString());
                     _this.answersObj[index].percentEl.css({
                         width: '' + percentValue.toFixed(1) + '%'
                     });
@@ -119,10 +120,12 @@
         (this.jsonConfig.poll_answer.length > 0) &&
         (this.jsonConfig.answers.hasOwnProperty(this.jsonConfig.poll_answer) === false)
     ) {
-                    this.questionEl.append(
-            '<h3>Error!</h3>' +
-            '<p>XML data format changed. List of answers was modified, but poll data was not updated.</p>'
-        );
+                    HtmlUtils.append(this.questionEl, HtmlUtils.joinHtml(
+                        HtmlUtils.HTML('<h3>Error!</h3>'),
+                        HtmlUtils.HTML(
+                          '<p>XML data format changed. List of answers was modified, but poll data was not updated.</p>'
+                        )
+                    ));
 
                     return;
                 }
@@ -133,8 +136,8 @@
     // Get the URL to which we will post the users answer to the question.
                 this.ajax_url = this.questionEl.data('ajax-url');
 
-                this.questionHtmlMarkup = $('<div />').html(this.jsonConfig.question).text();
-                this.questionEl.append(this.questionHtmlMarkup);
+                this.questionHtmlMarkup = $('<div />').html(HtmlUtils.HTML(this.jsonConfig.question).toString()).text();
+                this.questionEl.append(HtmlUtils.HTML(this.questionHtmlMarkup).toString());
 
     // When the user selects and answer, we will set this flag to true.
                 this.questionAnswered = false;
@@ -160,24 +163,24 @@
                     answer.questionEl = $('<div class="question"></div>');
                     answer.buttonEl = $('<div class="button"></div>');
                     answer.textEl = $('<div class="text"></div>');
-                    answer.questionEl.append(answer.buttonEl);
-                    answer.questionEl.append(answer.textEl);
+                    answer.questionEl.append(HtmlUtils.HTML(answer.buttonEl).toString());
+                    answer.questionEl.append(HtmlUtils.HTML(answer.textEl).toString());
 
-                    answer.el.append(answer.questionEl);
+                    answer.el.append(HtmlUtils.HTML(answer.questionEl).toString());
 
                     answer.statsEl = $('<div class="stats"></div>');
                     answer.barEl = $('<div class="bar"></div>');
                     answer.percentEl = $('<div class="percent"></div>');
-                    answer.barEl.append(answer.percentEl);
+                    answer.barEl.append(HtmlUtils.HTML(answer.percentEl).toString());
                     answer.numberEl = $('<div class="number"></div>');
-                    answer.statsEl.append(answer.barEl);
-                    answer.statsEl.append(answer.numberEl);
+                    answer.statsEl.append(HtmlUtils.HTML(answer.barEl).toString());
+                    answer.statsEl.append(HtmlUtils.HTML(answer.numberEl).toString());
 
                     answer.statsEl.hide();
 
-                    answer.el.append(answer.statsEl);
+                    answer.el.append(HtmlUtils.HTML(answer.statsEl).toString());
 
-                    answer.textEl.html(value);
+                    answer.textEl.html(HtmlUtils.HTML(value).toString());
 
                     if (_this.shortVersion === true) {
                         $.each(answer, function(index, value) {
@@ -214,8 +217,7 @@
                         this.resetButton.hide();
                     }
 
-                    this.resetButton.appendTo(this.questionEl);
-
+                    HtmlUtils.append(this.questionEl, this.resetButton);
                     this.resetButton.on('click', function() {
                         _this.submitReset();
                     });
@@ -298,6 +300,7 @@
                     _this.jsonConfig.poll_answers[index] = value;
                 });
 
+                // xss-lint: disable=javascript-jquery-html
                 _this.questionEl.children('.poll_question_div').html(JSON.stringify(_this.jsonConfig));
 
                 _this.postInit();
diff --git a/common/static/common/js/components/views/tabbed_view.js b/common/static/common/js/components/views/tabbed_view.js
index f9ade4688d..9a79e7834c 100644
--- a/common/static/common/js/components/views/tabbed_view.js
+++ b/common/static/common/js/components/views/tabbed_view.js
@@ -8,7 +8,8 @@
         'edx-ui-toolkit/js/utils/constants',
         'text!common/templates/components/tabbed_view.underscore',
         'text!common/templates/components/tab.underscore',
-        'text!common/templates/components/tabpanel.underscore'
+        'text!common/templates/components/tabpanel.underscore',
+        'edx-ui-toolkit/js/utils/html-utils'
     ], function(
         Backbone,
         _,
@@ -16,7 +17,8 @@
         Constants,
         tabbedViewTemplate,
         tabTemplate,
-        tabPanelTemplate
+        tabPanelTemplate,
+        HtmlUtils
     ) {
         var getTabPanelId = function(id) {
             return 'tabpanel-' + id;
@@ -64,7 +66,7 @@
             initialize: function(options) {
                 this.router = options.router || null;
                 this.tabs = options.tabs;
-                this.template = _.template(tabbedViewTemplate)({
+                this.template = HtmlUtils.template(tabbedViewTemplate)({
                     viewLabel: this.viewLabel
                 });
                 // Convert each view into a TabPanelView
@@ -82,7 +84,10 @@
             },
             render: function() {
                 var self = this;
-                this.$el.html(this.template);
+                HtmlUtils.setHtml(
+                    this.$el,
+                    this.template
+                );
                 _.each(this.tabs, function(tabInfo, index) {
                     var $tabEl = $(_.template(tabTemplate)({
                             index: index,
diff --git a/common/static/common/templates/components/system-feedback.underscore b/common/static/common/templates/components/system-feedback.underscore
index 9168abc9d5..fb8b32af22 100644
--- a/common/static/common/templates/components/system-feedback.underscore
+++ b/common/static/common/templates/components/system-feedback.underscore
@@ -1,22 +1,22 @@
-<div class="wrapper wrapper-<%= type %> wrapper-<%= type %>-<%= intent %>
+<div class="wrapper wrapper-<%- type %> wrapper-<%- type %>-<%- intent %>
             <% if(obj.shown) { %>is-shown<% } else { %>is-hiding<% } %>
-            <% if(_.contains(['help', 'mini'], intent)) { %>wrapper-<%= type %>-status<% } %>"
-     id="<%= type %>-<%= intent %>"
+            <% if(_.contains(['help', 'mini'], intent)) { %>wrapper-<%- type %>-status<% } %>"
+     id="<%- type %>-<%- intent %>"
      aria-hidden="<% if(obj.shown) { %>false<% } else { %>true<% } %>"
-     aria-labelledby="<%= type %>-<%= intent %>-title"
+     aria-labelledby="<%- type %>-<%- intent %>-title"
      tabindex="-1"
-     <% if (obj.message) { %>aria-describedby="<%= type %>-<%= intent %>-description" <% } %>
+     <% if (obj.message) { %>aria-describedby="<%- type %>-<%- intent %>-description" <% } %>
      <% if (obj.actions) { %>role="dialog"<% } %>
   >
-  <div class="<%= type %> <%= intent %> <% if(obj.actions) { %>has-actions<% } %>">
+  <div class="<%- type %> <%- intent %> <% if(obj.actions) { %>has-actions<% } %>">
     <% if(obj.icon) { %>
       <% var iconClass = {"warning": "warning", "confirmation": "check", "error": "warning", "announcement": "bullhorn", "step-required": "exclamation-circle", "help": "question", "mini": "cog"} %>
-      <span class="feedback-symbol fa fa-<%= iconClass[intent] %>" aria-hidden="true"></span>
+      <span class="feedback-symbol fa fa-<%- iconClass[intent] %>" aria-hidden="true"></span>
     <% } %>
 
     <div class="copy">
-      <h2 class="title title-3" id="<%= type %>-<%= intent %>-title"><%- title %></h2>
-      <% if(obj.message) { %><p class="message" id="<%= type %>-<%= intent %>-description"><%- message %></p><% } %>
+      <h2 class="title title-3" id="<%- type %>-<%- intent %>-title"><%- title %></h2>
+      <% if(obj.message) { %><p class="message" id="<%- type %>-<%- intent %>-description"><%- message %></p><% } %>
     </div>
 
     <% if(obj.actions) { %>
@@ -24,13 +24,13 @@
       <ul>
         <% if(actions.primary) { %>
         <li class="nav-item">
-          <button class="action-primary <%= actions.primary.class %>"><%- actions.primary.text %></button>
+          <button class="action-primary <%- actions.primary.class %>"><%- actions.primary.text %></button>
         </li>
         <% } %>
         <% if(actions.secondary) {
              _.each(actions.secondary, function(secondary) { %>
         <li class="nav-item">
-          <button class="action-secondary <%= secondary.class %>"><%- secondary.text %></button>
+          <button class="action-secondary <%- secondary.class %>"><%- secondary.text %></button>
         </li>
         <%   });
            } %>
@@ -39,9 +39,9 @@
     <% } %>
 
     <% if(obj.closeIcon) { %>
-    <a href="#" rel="view" class="action action-close action-<%= type %>-close">
+    <a href="#" rel="view" class="action action-close action-<%- type %>-close">
       <span class="icon fa fa-times-circle" aria-hidden="true"></span>
-      <span class="label">close <%= type %></span>
+      <span class="label">close <%- type %></span>
     </a>
     <% } %>
   </div>
diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index a813f52b4d..b764ccfaa6 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/common/static/js/capa/drag_and_drop/draggables.js
@@ -1,5 +1,7 @@
 (function(requirejs, require, define) {
-    define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggable_logic'], function(draggableEvents, draggableLogic) {
+    define(['js/capa/drag_and_drop/draggable_events', 'js/capa/drag_and_drop/draggable_logic',
+        'edx-ui-toolkit/js/utils/html-utils'],
+    function(draggableEvents, draggableLogic, HtmlUtils) {
         return {
             init: init
         };
@@ -55,17 +57,13 @@
                     draggableObj.iconImgEl.appendTo(draggableObj.iconEl);
 
                     if (draggableObj.originalConfigObj.label.length > 0) {
-                        draggableObj.labelEl = $(
-                        '<div ' +
-                            'style=" ' +
-                                'position: absolute; ' +
-                                'color: black; ' +
-                                'font-size: 0.95em; ' +
-                            '" ' +
-                        'role="label">' +
-                            draggableObj.originalConfigObj.label +
-                        '</div>'
-                    );
+                        draggableObj.labelEl = $(HtmlUtils.joinHtml(
+                            HtmlUtils.HTML(
+                                '<div style="position: absolute; color: black; font-size: 0.95em; " role="label">'
+                            ),
+                            draggableObj.originalConfigObj.label,
+                            HtmlUtils.HTML('</div>')
+                    ).toString());
                         draggableObj.labelEl.css({
                             left: 50 - draggableObj.labelWidth * 0.5,
                             top: 5 + draggableObj.iconHeightSmall + 5
@@ -86,17 +84,11 @@
                 return;
             } else {
                 if (draggableObj.originalConfigObj.label.length > 0) {
-                    draggableObj.iconEl = $(
-                    '<div ' +
-                        'style=" ' +
-                            'position: absolute; ' +
-                            'color: black; ' +
-                            'font-size: 0.95em; ' +
-                        '" ' +
-                    '>' +
-                        draggableObj.originalConfigObj.label +
-                    '</div>'
-                );
+                    draggableObj.iconEl = $(HtmlUtils.joinHtml(
+                        HtmlUtils.HTML('<div style=" position: absolute; color: black; font-size: 0.95em; " >'),
+                        draggableObj.originalConfigObj.label,
+                        HtmlUtils.HTML('</div>')
+                ).toString());
                     draggableObj.iconEl.css({
                         left: 50 - draggableObj.iconWidthSmall * 0.5,
                         top: 50 - draggableObj.iconHeightSmall * 0.5
@@ -168,21 +160,11 @@
                 numDraggablesOnMe: 0
             };
 
-            draggableObj.containerEl = $(
-            '<div ' +
-                'style=" ' +
-                    'width: 100px; ' +
-                    'height: 100px; ' +
-                    'display: inline-block; ' +
-                    'overflow: hidden; ' +
-                    'border-left: 1px solid #CCC; ' +
-                    'border-right: 1px solid #CCC; ' +
-                    'text-align: center; ' +
-                    'position: relative; ' +
-                    'cursor: move; ' +
-                '" ' +
-                'role="listitem"></div>'
-        );
+            draggableObj.containerEl = $(HtmlUtils.joinHtml(
+                HtmlUtils.HTML('<div style=" width: 100px; height: 100px; display: inline-block; overflow: hidden; '),
+                HtmlUtils.HTML('border-left: 1px solid #CCC; border-right: 1px solid #CCC; text-align: center; '),
+                HtmlUtils.HTML('position: relative; cursor: move; " role="listitem"></div>')
+        ).toString());
 
             draggableObj.containerEl.appendTo(state.sliderEl);
 
@@ -230,18 +212,13 @@
                     draggableObj.iconEl.appendTo(draggableObj.containerEl);
 
                     if (obj.label.length > 0) {
-                        draggableObj.labelEl = $(
-                        '<div ' +
-                            'style=" ' +
-                                'position: absolute; ' +
-                                'color: black; ' +
-                                'font-size: 0.95em; ' +
-                                'cursor: move; ' +
-                            '" ' +
-                        '>' +
-                            obj.label +
-                        '</div>'
-                    );
+                        draggableObj.labelEl = $(HtmlUtils.joinHtml(
+                            HtmlUtils.HTML(
+                                '<div style=" position: absolute; color: black; font-size: 0.95em; cursor: move; " >'
+                            ),
+                            obj.label,
+                            HtmlUtils.HTML('</div>')
+                    ).toString());
 
                         draggableObj.labelEl.appendTo(draggableObj.containerEl);
                         draggableObj.labelWidth = draggableObj.labelEl.width();
@@ -270,19 +247,14 @@
                     draggableObj.iconElBorder = '1px solid black';
                     draggableObj.iconElLeftOffset = 9;
 
-                    draggableObj.iconEl = $(
-                    '<div ' +
-                        'style=" ' +
-                            'position: absolute; ' +
-                            'color: black; ' +
-                            'font-size: 0.95em; ' +
-                            'cursor: move; ' +
-                        '" ' +
-                        'tabindex="0" aria-grabbed="false" role="listitem"' +
-                    '>' +
-                        obj.label +
-                    '</div>'
-                );
+                    draggableObj.iconEl = $(HtmlUtils.joinHtml(
+                        HtmlUtils.HTML(
+                            '<div style=" position: absolute; color: black; font-size: 0.95em; cursor: move; " '
+                        ),
+                        HtmlUtils.HTML('tabindex="0" aria-grabbed="false" role="listitem">'),
+                        obj.label,
+                        HtmlUtils.HTML('</div>')
+                ).toString());
 
                     draggableObj.iconEl.appendTo(draggableObj.containerEl);
 
diff --git a/common/static/js/capa/drag_and_drop/scroller.js b/common/static/js/capa/drag_and_drop/scroller.js
index 0a1fa48ea7..7a52c3c237 100644
--- a/common/static/js/capa/drag_and_drop/scroller.js
+++ b/common/static/js/capa/drag_and_drop/scroller.js
@@ -1,52 +1,33 @@
 (function(requirejs, require, define) {
-    define([], function() {
+    define(['edx-ui-toolkit/js/utils/html-utils'], function(HtmlUtils) {
         return Scroller;
 
         function Scroller(state) {
             var $parentEl, $moveLeftEl, $showEl, $moveRightEl, showElLeftMargin;
 
-            $parentEl = $(
-            '<div ' +
-                'style=" ' +
-                    'width: 665px; ' +
-                    'height: 102px; ' +
-                    'margin-left: auto; ' +
-                    'margin-right: auto; ' +
-                '" ' +
-            '></div>'
-        );
-
-            $moveLeftEl = $(
-            '<div ' +
-                'style=" ' +
-                    'width: 40px; ' +
-                    'height: 102px; ' +
-                    'display: inline; ' +
-                    'float: left; ' +
-                '" ' +
-            '>' +
-                '<div ' +
-                    'style=" ' +
-                        'width: 38px; ' +
-                        'height: 100px; ' +
-
-                        'border: 1px solid #CCC; ' +
-                        'background-color: #EEE; ' +
-                        'background-image: -webkit-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: -moz-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: -ms-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: -o-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: linear-gradient(top, #EEE, #DDD); ' +
-                        '-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
-                        'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
-
-                        "background-image: url('" + baseUrl + "images/arrow-left.png'); " +
-                        'background-position: center center; ' +
-                        'background-repeat: no-repeat; ' +
-                    '" ' +
-                '></div>' +
-            '</div>'
-        );
+            $parentEl = $(HtmlUtils.HTML(
+                '<div style=" width: 665px; height: 102px; margin-left: auto; margin-right: auto; " ></div>'
+            ).toString());
+
+            $moveLeftEl = $(HtmlUtils.joinHtml(
+            HtmlUtils.HTML('<div style=" width: 40px; height: 102px; display: inline; float: left; " >'),
+                HtmlUtils.HTML('<div style=" width: 38px; height: 100px; border: 1px solid #CCC; '),
+                    HtmlUtils.HTML('background-color: #EEE; '),
+                    HtmlUtils.HTML('background-image: -webkit-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: -moz-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: -ms-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: -o-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; '),
+                    HtmlUtils.HTML('box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; '),
+                            // eslint-disable-next-line no-undef
+                    HtmlUtils.HTML("background-image: url('"), baseUrl,
+                    HtmlUtils.HTML("images/arrow-left.png'); "),
+                    HtmlUtils.HTML('background-position: center center; '),
+                    HtmlUtils.HTML('background-repeat: no-repeat; " >'),
+                HtmlUtils.HTML('</div>'),
+            HtmlUtils.HTML('</div>')
+        ).toString());
             $moveLeftEl.appendTo($parentEl);
 
         // The below is necessary to prevent the browser thinking that we want
@@ -77,17 +58,9 @@
                 });
             });
 
-            $showEl = $(
-            '<div ' +
-                'style=" ' +
-                    'width: 585px; ' +
-                    'height: 102px; ' +
-                    'overflow: hidden; ' +
-                    'display: inline; ' +
-                    'float: left; ' +
-                '" ' +
-            '></div>'
-        );
+            $showEl = $(HtmlUtils.HTML(
+                '<div style=" width: 585px; height: 102px; overflow: hidden; display: inline; float: left; " ></div>'
+            ).toString());
             $showEl.appendTo($parentEl);
 
             showElLeftMargin = 0;
@@ -96,53 +69,36 @@
         // so that any SANE number of draggables will fit in a single row. It
         // will be contained in a parent element whose 'overflow' CSS value
         // will be hidden, preventing the long row from fully being visible.
-            state.sliderEl = $(
-            '<div ' +
-                'style=" ' +
-                    'width: 20000px; ' +
-                    'height: 100px; ' +
-                    'border-top: 1px solid #CCC; ' +
-                    'border-bottom: 1px solid #CCC; ' +
-                '" ' +
-            '></div>'
-        );
+            // eslint-disable-next-line no-param-reassign
+            state.sliderEl = $(HtmlUtils.joinHtml(
+                HtmlUtils.HTML('<div style=" width: 20000px; height: 100px; border-top: 1px solid #CCC; '),
+                HtmlUtils.HTML('border-bottom: 1px solid #CCC; " ></div>')
+            ).toString());
             state.sliderEl.appendTo($showEl);
 
             state.sliderEl.mousedown(function(event) {
                 event.preventDefault();
             });
 
-            $moveRightEl = $(
-            '<div ' +
-                'style=" ' +
-                    'width: 40px; ' +
-                    'height: 102px; ' +
-                    'display: inline; ' +
-                    'float: left; ' +
-                '" ' +
-            '>' +
-                '<div ' +
-                    'style=" ' +
-                        'width: 38px; ' +
-                        'height: 100px; ' +
-
-                        'border: 1px solid #CCC; ' +
-                        'background-color: #EEE; ' +
-                        'background-image: -webkit-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: -moz-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: -ms-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: -o-linear-gradient(top, #EEE, #DDD); ' +
-                        'background-image: linear-gradient(top, #EEE, #DDD); ' +
-                        '-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
-                        'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
-
-                        "background-image: url('" + baseUrl + "images/arrow-right.png'); " +
-                        'background-position: center center; ' +
-                        'background-repeat: no-repeat; ' +
-                    '" ' +
-                '></div>' +
-            '</div>'
-        );
+            $moveRightEl = $(HtmlUtils.joinHtml(
+            HtmlUtils.HTML('<div style=" width: 40px; height: 102px; display: inline; float: left; " >'),
+                HtmlUtils.HTML('<div style=" width: 38px; height: 100px; border: 1px solid #CCC; '),
+                    HtmlUtils.HTML('background-color: #EEE; '),
+                    HtmlUtils.HTML('background-image: -webkit-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: -moz-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: -ms-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: -o-linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('background-image: linear-gradient(top, #EEE, #DDD); '),
+                    HtmlUtils.HTML('-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; '),
+                    HtmlUtils.HTML('box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; '),
+                    // eslint-disable-next-line no-undef
+                    HtmlUtils.HTML("background-image: url('"), baseUrl,
+                    HtmlUtils.HTML("images/arrow-right.png'); "),
+                    HtmlUtils.HTML('background-position: center center; '),
+                    HtmlUtils.HTML('background-repeat: no-repeat; " >'),
+                HtmlUtils.HTML('</div>'),
+            HtmlUtils.HTML('</div>')
+        ).toString());
             $moveRightEl.appendTo($parentEl);
 
         // The below is necessary to prevent the browser thinking that we want
diff --git a/common/test/test_sites/test_site/templates/static_templates/faq.html b/common/test/test_sites/test_site/templates/static_templates/faq.html
index 8723f73871..df6be237c6 100644
--- a/common/test/test_sites/test_site/templates/static_templates/faq.html
+++ b/common/test/test_sites/test_site/templates/static_templates/faq.html
@@ -4,6 +4,8 @@
 <%!
 from django.utils.translation import ugettext as _
 from django.urls import reverse
+
+from openedx.core.djangolib.markup import HTML, Text
 %>
 
 <%block name="title"><title>${_("FAQ")}</title></%block>
@@ -23,7 +25,7 @@ from django.urls import reverse
         <h2>${_("Organization")}</h2>
         <article class="response">
           <h3>${_("What is {edX}?").format(edX="edX")}</h3>
-          <p>${_('{EdX} is a not-for-profit enterprise of its founding partners, the {MIT_long} ({MIT}) and {harvard_u} that offers online learning to on-campus students and to millions of people around the world. To do so, {edX} is building an open-source online learning platform and hosts an online web portal at <a href=\"http://www.edx.org\">www.edx.org</a> for online education.').format(EdX="EdX", edX="edX", MIT_long="Massachusetts Institute of Technology", MIT="MIT", harvard_u="Harvard University")}</p>
+            <p>${Text(_('{EdX} is a not-for-profit enterprise of its founding partners, the {MIT_long} ({MIT}) and {harvard_u} that offers online learning to on-campus students and to millions of people around the world. To do so, {edX} is building an open-source online learning platform and hosts an online web portal at {link_start}www.edx.org{link_end} for online education.')).format(EdX="EdX", edX="edX", MIT_long="Massachusetts Institute of Technology", MIT="MIT", harvard_u="Harvard University", link_start=HTML('<a href="http://www.edx.org">'), link_end=HTML('</a>'))}</p>
           <p>${_("{EdX} currently offers {HarvardX}, {MITx} and {BerkeleyX} classes online for free. Beginning in fall 2013, {edX} will offer {WellesleyX} , {GeorgetownX} and the {UTexas} classes online for free. The {UT} System includes nine universities and six health institutions. In 2014, {edX} will further expand its consortium, including several international schools, when it begins offering courses from {EPFL}, {McGill}, {Toronto}, {ANU}, {Delft}, and {Rice}.  The {edX} institutions aim to extend their collective reach to build a global community of online students. Along with offering online courses, the three universities undertake research on how students learn and how technology can transform learning both on-campus and online throughout the world.").format(
               EdX="EdX",
               edX="edX",
@@ -89,7 +91,7 @@ from django.urls import reverse
         </article>
         <article class="response">
           <h3>${_("What will the scope of the online courses be? How many? Which faculty?")}</h3>
-          <p>${_('Our goal is to offer a wide variety of courses across disciplines. There are currently {link_start}fifteen{link_end} offered on the {edX} platform.').format(link_start='<a href="/courses">', link_end='</a>', edX="edX")}</p>
+          <p>${Text(_('Our goal is to offer a wide variety of courses across disciplines. There are currently {link_start}fifteen{link_end} offered on the {edX} platform.')).format(link_start=HTML('<a href="/courses">'), link_end=HTML('</a>'), edX="edX")}</p>
         </article>
         <article class="response">
           <h3>${_("Who is the learner? Domestic or international? Age range?")}</h3>
@@ -105,11 +107,11 @@ from django.urls import reverse
         </article>
         <article class="response">
           <h3>${_("How may I apply to study with {edX}?").format(edX="edX")}</h3>
-          <p>${_('Simply complete the online {link_start}signup form{link_end}.  Enrolling will create your unique student record in the {edX} database, allow you to register for classes, and to receive a certificate on successful completion.').format(link_start='<a href="#signup-modal" rel="leanModal">', link_end='</a>', edX="edX")}</p>
+          <p>${Text(_('Simply complete the online {link_start}signup form{link_end}.  Enrolling will create your unique student record in the {edX} database, allow you to register for classes, and to receive a certificate on successful completion.')).format(link_start=HTML('<a href="#signup-modal" rel="leanModal">'), link_end=HTML('</a>'), edX="edX")}</p>
         </article>
         <article class="response">
           <h3>${_("How may another university participate in {edX}? ").format(edX="edX")}</h3>
-          <p>${_('If you are from a university interested in discussing {edX}, please email {email}').format(email='<a href="mailto:university@edx.org">university@edx.org</a>', edX="edX")}</p>
+          <p>${Text(_('If you are from a university interested in discussing {edX}, please email {email}')).format(email=HTML('<a href="mailto:university@edx.org">university@edx.org</a>'), edX="edX")}</p>
         </article>
       </section>
 
@@ -118,7 +120,7 @@ from django.urls import reverse
         <article class="response">
           <h3>${_("What technology will {edX} use?").format(edX="edX")}</h3>
           <p>${_("The {edX} open-source online learning platform will feature interactive learning designed specifically for the web. Features will include: self-paced learning, online discussion groups, wiki-based collaborative learning, assessment of learning as a student progresses through a course, and online laboratories and other interactive learning tools. The platform will also serve as a laboratory from which data will be gathered to better understand how students learn. Because it is open source, the platform will be continuously improved by a worldwide community of collaborators, with new features added as needs arise.").format(edX="edX")}</p>
-          <p>${_("The first version of the technology was used in the first <em>{MITx}</em> course, 6.002x Circuits and Electronics, which launched in Spring, 2012.").format(MITx="MITx")}</p>
+            <p>${Text(_("The first version of the technology was used in the first {em_start}{MITx}{em_end} course, 6.002x Circuits and Electronics, which launched in Spring, 2012.")).format(em_start=HTML('<em>'), MITx="MITx", em_end=HTML('</em>'))}</p>
         </article>
         <article class="response">
           <h3>${_("How is this different from what other universities are doing online?")}</h3>
diff --git a/lms/static/js/components/card/views/card.js b/lms/static/js/components/card/views/card.js
index 3fd0fb3220..ffff79586d 100644
--- a/lms/static/js/components/card/views/card.js
+++ b/lms/static/js/components/card/views/card.js
@@ -20,8 +20,10 @@
     define(['jquery',
         'underscore',
         'backbone',
-        'text!templates/components/card/card.underscore'],
-        function($, _, Backbone, cardTemplate) {
+        'text!templates/components/card/card.underscore',
+        'edx-ui-toolkit/js/utils/html-utils'
+    ],
+        function($, _, Backbone, cardTemplate, HtmlUtils) {
             var CardView = Backbone.View.extend({
                 tagName: 'li',
 
@@ -46,7 +48,7 @@
                     this.render();
                 },
 
-                template: _.template(cardTemplate),
+                template: HtmlUtils.template(cardTemplate),
 
                 switchOnConfiguration: function(square_result, list_result) {
                     return this.callIfFunction(this.configuration) === 'square_card' ?
@@ -77,16 +79,19 @@
                     if (description.length > maxLength) {
                         description = description.substring(0, maxLength).trim() + '...';
                     }
-                    this.$el.html(this.template({
-                        pennant: this.callIfFunction(this.pennant),
-                        title: this.callIfFunction(this.title),
-                        description: description,
-                        action_class: this.callIfFunction(this.actionClass),
-                        action_url: this.callIfFunction(this.actionUrl),
-                        action_content: this.callIfFunction(this.actionContent),
-                        configuration: this.callIfFunction(this.configuration),
-                        srInfo: this.srInfo
-                    }));
+                    HtmlUtils.setHtml(
+                        this.$el,
+                        this.template({
+                            pennant: this.callIfFunction(this.pennant),
+                            title: this.callIfFunction(this.title),
+                            description: description,
+                            action_class: this.callIfFunction(this.actionClass),
+                            action_url: this.callIfFunction(this.actionUrl),
+                            action_content: this.callIfFunction(this.actionContent),
+                            configuration: this.callIfFunction(this.configuration),
+                            srInfo: this.srInfo
+                        })
+                    );
                     var detailsEl = this.$el.find('.card-meta');
                     _.each(this.callIfFunction(this.details), function(detail) {
                         // Call setElement to rebind event handlers
diff --git a/lms/static/js/discovery/views/filter_label.js b/lms/static/js/discovery/views/filter_label.js
index 9100eb9b6b..c594264f76 100644
--- a/lms/static/js/discovery/views/filter_label.js
+++ b/lms/static/js/discovery/views/filter_label.js
@@ -3,8 +3,9 @@
         'jquery',
         'underscore',
         'backbone',
-        'gettext'
-    ], function($, _, Backbone, gettext) {
+        'gettext',
+        'edx-ui-toolkit/js/utils/html-utils'
+    ], function($, _, Backbone, gettext, HtmlUtils) {
         'use strict';
 
         return Backbone.View.extend({
@@ -14,7 +15,7 @@
             className: 'active-filter',
 
             initialize: function() {
-                this.tpl = _.template($('#filter-tpl').html());
+                this.tpl = HtmlUtils.template($('#filter-tpl').html());
                 this.listenTo(this.model, 'remove', this.remove);
                 this.listenTo(this.model, 'change', this.render);
             },
@@ -23,7 +24,10 @@
                 var data = _.clone(this.model.attributes);
                 data.name = data.name || data.query;
                 this.className = data.type;
-                this.$el.html(this.tpl(data));
+                HtmlUtils.setHtml(
+                    this.$el,
+                    this.tpl(data)
+                );
                 return this;
             }
 
diff --git a/lms/static/js/edxnotes/views/tabs/tags.js b/lms/static/js/edxnotes/views/tabs/tags.js
index 86be5f50c9..5b9eda9764 100644
--- a/lms/static/js/edxnotes/views/tabs/tags.js
+++ b/lms/static/js/edxnotes/views/tabs/tags.js
@@ -2,8 +2,8 @@
     'use strict';
     define([
         'gettext', 'jquery', 'underscore', 'js/edxnotes/views/note_group', 'js/edxnotes/views/tab_panel',
-        'js/edxnotes/views/tab_view'
-    ], function(gettext, $, _, NoteGroupView, TabPanelView, TabView) {
+        'js/edxnotes/views/tab_view', 'edx-ui-toolkit/js/utils/html-utils'
+    ], function(gettext, $, _, NoteGroupView, TabPanelView, TabView, HtmlUtils) {
         var view = 'Tags';
         var TagsView = TabView.extend({
             scrollToTag: function(tagName) {
@@ -104,7 +104,7 @@
                         container.appendChild(group.render().el);
                     }, this);
 
-                    this.$el.append(container);
+                    this.$el.append(HtmlUtils.HTML(container).toString());
                     return this;
                 },
 
diff --git a/lms/static/js/instructor_dashboard/ecommerce.js b/lms/static/js/instructor_dashboard/ecommerce.js
index 8e8f7b32a0..a60ec08c12 100644
--- a/lms/static/js/instructor_dashboard/ecommerce.js
+++ b/lms/static/js/instructor_dashboard/ecommerce.js
@@ -157,7 +157,7 @@ var edx = edx || {};
                         // remove the first element after the registration_code_status_form
                         // so it doesn't duplicate the registration_code_lookup_actions in the UI.
                         $registration_code_status_form.next().remove();
-                        $(registration_code_lookup_actions).insertAfter($registration_code_status_form);
+                        edx.HtmlUtils.append($registration_code_status_form, $(registration_code_lookup_actions));
                     }
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
diff --git a/lms/static/js/verify_student/views/image_input_view.js b/lms/static/js/verify_student/views/image_input_view.js
index c25dafe429..a7e6afcffc 100644
--- a/lms/static/js/verify_student/views/image_input_view.js
+++ b/lms/static/js/verify_student/views/image_input_view.js
@@ -24,9 +24,11 @@
          },
 
          render: function() {
-             var renderedHtml = _.template($(this.template).html())({});
-             $(this.el).html(renderedHtml);
-
+             var renderedHtml = edx.HtmlUtils.template($(this.template).html())({});
+             edx.HtmlUtils.setHtml(
+                 $(this.el),
+                 renderedHtml
+             );
             // Set the submit button to disabled by default
              this.setSubmitButtonEnabled(false);
 
