CODEWITHSUNDEEP
javascriptjquery
user4932805
user4932805

Reputation:

Pure JavaScript alternative to jQuery's .html()

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!")
        }
      })
    })

Upvotes: 10

Views: 9011

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65835

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).

Upvotes: 7

Oriol
Oriol

Reputation: 288520

You can use textContent:

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

element.textContent = responseText;

Upvotes: 10

Related Questions