Pure JavaScript alternative to jQuery's .html()

Question

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

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
– Malk, Commented Mar 23, 2016 at 17:48
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
– thednp, Commented Mar 23, 2016 at 17:59

Oriol · Accepted Answer · 2016-03-23 17:51:00Z

12

You can use textContent:

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

element.textContent = responseText;

answered Mar 23, 2016 at 17:51

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Marcus · Accepted Answer · 2016-03-23 18:07:39Z

8

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

edited Mar 23, 2016 at 18:07

answered Mar 23, 2016 at 17:48

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

13 Comments

Oriol Over a year ago

innerText is not standard, it's a IE thingy

Scott Marcus Over a year ago

It was created by MS, but is well supported in all major browsers. But, no, it's not a standard. Just a de facto standard.

ndugger Over a year ago

@ScottMarcus I didn't add brackets, I used markdown to turn your text into links. Also, I'm not sure you understand how polyfills work. It just checks for the existence of a feature, and recreates it in javascript for the legacy browsers. It's not like a plugin or some flash applet, etc.

Sterling Archer Over a year ago

@ScottMarcus you do realize this is the internet.. everybody is directly involved in this answer.

ndugger Over a year ago

My initial revision was approved because the community agreed that it improved legibility. Your post is hard to track with the long URLs. I was only trying to help out. Please don't be so negative.

|

Collectives™ on Stack Overflow

Pure JavaScript alternative to jQuery's .html()

2 Answers 2

Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related