What is the difference between document.baseURI and document.URL in javascript

Question

I always saw in developer tool that the both the entities(baseURI and URL) shows the same URL, which is shown in address bar most of the time. Can someone provide me the scenarios when those are different and when do we use one over other. I have seen the description of mdn website but still confused regarding those two terms.

Answer 1

For most intended purposes, it is the same. But it can differ in some scenarios.

1) If you use a base tag in the HTML document. Lets say, you use the following HTML tag,

<base href = "https://example.org" />

Check the https://jsfiddle.net/kqbL0c4f/

and your URL is https://example.org/123 Your document.URL and document.baseURI would differ.

2) If you create a document dynamically