如何替換div子元素？

Question

在async調用中，我收到一個 HTML 組件，我想用另一個div替換它。

這是我的主要 HTML：

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

如何用response.data HTML 響應替換 div id="main" child。 有什么可能的方法嗎？

這是異步調用：

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

它給了我一個完整的div ：

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

Answer 1

我建議您使用 jQuery 替換元素，使用方法 replaceWith。 你可以這樣做：

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

這當然只有在接收到的數據是有效的 HTML 元素時才有效。

Answer 2

outerHTML將替換元素本身。

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>