How to replace div child element?

Question

On async call I am receiving a HTML component which I want to replace with another div.

Here is my main HTML:

<div id="main">
  <H1>Name</h1>
  <div>Content wil reside here</div>
</div>

How can I replace div id="main"child with the response.data HTML response. Is there any possible way to do so?

Here is the async call:

axios.post(url, newState).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
  console.log(error.response.data);
});

It's returning me a complete div:

<div>
Hi
<p>Hello</p>
</div>

You should be very aware when you use the dynamic html received from some response as it might not be safe. — RajkumarG, Oct 12 '20 at 12:05
You can refer to this question answer [How to replace div with another div in javascript?](https://stackoverflow.com/questions/37347690/how-to-replace-div-with-another-div-in-javascript). **Warning** Its work when you will know the `id` of the div which coming as a response. — Rabby, Oct 12 '20 at 12:53

score 0 · Accepted Answer · answered Oct 12 '20 at 12:03

0

I suggest you use jQuery to replace the element, using method replaceWith. You can do it this way:

 axios.post(url,newState)
       .then(response => {
           const $recievedHTML = $(response.data);
           $("#main div").replaceWith($recievedHTML);
       })

This will work of course only if the received data is a valid HTML element.

answered Oct 12 '20 at 12:03

Tomer Levitski

111
4

Hi @Tomer Levitski thanks for the answer but is there a way to use only javascript with no jquery? – Oct 12 '20 at 12:34
Of course! I think you should use innerHTML property – Tomer Levitski Oct 12 '20 at 12:43

benhatsor · Answer 2 · 2020-10-12T12:44:56.893

-1

outerHTML will replace the element itself.

JS

var main = document.getElementById('main');
axios.post(url,newState)
  .then(response => {
    main.outerHTML = response;
  })
  .catch(error => {
    main.outerHTML = error;
  });

HTML

<div id="main"></div>

edited Oct 12 '20 at 12:44

answered Oct 12 '20 at 12:38

benhatsor

1,863
6
20

1

That will replace the *contents* of the div, not the div itself. – Quentin Oct 12 '20 at 12:41
Try using `outerHTML` ^ – benhatsor Oct 12 '20 at 12:47

How to replace div child element?

2 Answers2