The following code is used to ajax-load a div.

The only issue I have with it is that .html() renders raw html, and so I thought it might be a good idea to replace that with a pure JS alternative so that my view is clean of any escaping raw html.

I'd love to hear your thoughts about this.

$(document).ready(function() {
      $('.ajax_load').each(function(index, element) {
        var url = $(element).data('remote-url')
        if (url) {
          $.get(url, function(responseText) {
            $(element).html(responseText);
          })
        } else {
          console.log("missing url for ajax!")
        }
      })
    })

The following code is used to ajax-load a div.

The only issue I have with it is that .html() renders raw html, and so I thought it might be a good idea to replace that with a pure JS alternative so that my view is clean of any escaping raw html.

I'd love to hear your thoughts about this.

$(document).ready(function() {
      $('.ajax_load').each(function(index, element) {
        var url = $(element).data('remote-url')
        if (url) {
          $.get(url, function(responseText) {
            $(element).html(responseText);
          })
        } else {
          console.log("missing url for ajax!")
        }
      })
    })

• javascript
• jquery

• Nearly every line uses jQuery, not just the part that handles the response. So you will probably be loading the jQuery library anyway. You might as well use it. Try using $(element).text(responseText) instead if you just want to disable rendering raw html. – Malk Commented Mar 23, 2016 at 17:48
• 3 You could always look at the jQuery source files – John Hartsock Commented Mar 23, 2016 at 17:55
• element.innerHTML = '<some divs>' used in your site footer will basically remove the need for ready and many other old and not very performant jQuery methods. – thednp Commented Mar 23, 2016 at 17:59

2 Answers 2

You can use textContent:

The Node.textContent property represents the text content of a node and its descendants.

element.textContent = responseText;

jQuery's .html() method takes a string and runs that string through the HTML parser so that any HTML markup can be processed and the DOM updated. jQuery's .text() method also takes a string, but that string (even if it contains HTML) is not passed to the HTML parser for processing and any markup is escaped and included as textual content in the page.

If you would like to not use jQuery, you can accomplish the same thing as .html() with the DOM .innerHTML(https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property.

If you would like to accomplish the same thing as .text(), you can use the proprietary/legacy .innerText (https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText) property or the standard textContent (https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) DOM property (but the latter is not supported in IE until IE 9).