js fetch queryselector 1

js fetch queryselector

fetch("https://enable-cors.org/")
  .then(response => response.text())
  .then(text => {
    const parser = new DOMParser();
    const htmlDocument = parser.parseFromString(text, "text/html");
    const section = htmlDocument.documentElement.querySelector("section");
    document.querySelector("div").appendChild(section);
  })

Here is what the above code is Doing:
1. We’re using the fetch API to make a request to https://enable-cors.org/
2. We’re using the response’s text() method to get the response body as a string
3. We’re using the DOMParser API to parse the string into an HTML document
4. We’re using the querySelector() method to get the first section element in the document
5. We’re using the appendChild() method to append the section element to the div element in our page

The DOMParser API is a relatively new API that allows us to parse HTML and XML strings into a DOM node.

The DOMParser API is supported in all modern browsers, but not in Internet Explorer.

If you want to support Internet Explorer, you can use the DOMParser polyfill.

The DOMParser API is a great way to convert a string into a DOM node.

However, it’s not the only way.

You can also use the HTMLTemplateElement API to convert a string into a DOM node.

Here’s an example:

const template = document.createElement(“template”);
template.innerHTML = “

Hello World

“;
const section = template.content.firstChild;
document.querySelector(“div”).appendChild(section);

Here’s what the above code is doing:
1. We’re using the createElement() method to create a template element
2. We’re using the innerHTML property to set the template element’s HTML to

Hello World

3. We’re using the content property to get the template element’s content as a document fragment
4. We’re using the firstChild property to get the first child of the document fragment
5. We’re using the appendChild() method to append the section element to the div element in our page

The HTMLTemplateElement API is a relatively new API that allows us to create a template element.

The HTMLTemplateElement API is supported in all modern browsers, but not in Internet Explorer.

If you want to support Internet Explorer, you can use the HTMLTemplateElement polyfill.

The HTMLTemplateElement API is a great way to convert a string into a DOM node.

However, it’s not the only way.

You can also use the innerHTML property to convert a string into a DOM node.

Here’s an example:

const div = document.createElement(“div”);
div.innerHTML = “

Hello World

“;
const section = div.firstChild;
document.querySelector(“div”).appendChild(section);

Here’s what the above code is doing:
1. We’re using the createElement() method to create a div element
2. We’re using the innerHTML property to set the div element’s HTML to

Hello World

3. We’re using the firstChild property to get the first child of the div element
4. We’re using the appendChild() method to append the section element to the div element in our page

The innerHTML property is supported in all modern browsers, including Internet Explorer.

The innerHTML property is a great way to convert a string into a DOM node.

However, it’s not the only way.

You can also use the insertAdjacentHTML() method to convert a string into a DOM node.

Here’s an example:

const div = document.createElement(“div”);
div.insertAdjacentHTML(“beforeend”, “

Hello World

“);
const section = div.firstChild;
document.querySelector(“div”).appendChild(section);

Here’s what the above code is doing:
1.

Similar Posts