Can I use JavaScript fetch() to insert an inline svg in the DOM?

Question

I have a function that inserts an inline svg in the DOM using XMLHttpRequest() and I'm wondering if I can do the same function using fetch(). The function is...

el = document.querySelector('#foo')
var request = new XMLHttpRequest()
request.open('GET', 'bar.svg', true)

request.onreadystatechange = function() {
  if (this.readyState !== 4) return
  if (this.status !== 200) return
  el.innerHTML = this.responseText
}
request.send()
// bar.svg is inserted in element with ID 'foo'

So, is it possible to modernize this function into something like...

fetch('bar.svg').then(...)

score 36 · Accepted Answer · edited Jan 07 '22 at 13:27

36

You can. I think the following should work:

fetch('bar.svg')
    .then(r => r.text())
    .then(text => {
        el.innerHTML = text;
    })
    .catch(console.error.bind(console));

The second then is for resolving the .text(), which "takes a Response stream and reads it to completion" (MDN) (MDN Eng).

edited Jan 07 '22 at 13:27

33v

103
7

answered Jul 21 '17 at 14:45

SVSchmidt

6,269
2
26
37

I get an eslint error (needs // eslint-disable-next-line no-unsanitized/property) with similar code...which seems excessive, but is it? – Max Waterman Jul 18 '22 at 08:28
Can we insert inline svg without the network call? Is there any way? – Sabari Krishnan M Apr 14 '23 at 05:42

score -3 · Answer 2 · answered Jul 21 '17 at 14:38

-3

Yea, fetch returns a promise.So you can use then() and catch(error) to catch error. But be aware of Browser compatibility

answered Jul 21 '17 at 14:38

error404

331
1
8

Can I use JavaScript fetch() to insert an inline svg in the DOM?

2 Answers2

Linked