將文本/字符串響應轉換為 html

Question

在我的 fetch POST 中，我收到了一個純文本的 html 響應。 我想選擇相關部分，然后將其顯示在我的網頁中，所以我這樣做：

 document.querySelector('form').onsubmit = (event) => {
    event.preventDefault();

  fetch("", {

    method: 'POST',
    body: JSON.stringify({
      body: document.querySelector('#new_message').value
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
      "X-CSRFToken": getCookie('csrftoken')
    }
  })
  .then(response => response.text())
  .then(result => {
    document.querySelector('#new_message').value = ""
    let div = document.createElement('div')
 
    fetch("", {
      headers: {
        "Content-type": "charset=UTF-8",
      }
    })
    .then(response => response.text())
    .then(result2 => {

        var success = $(result2).filter("#granpost"+result['id']); 
        div.append(success);

        document.querySelector('#plis').append(div);
        console.log(success); // div#success  
    });



  });

}

這就是我想讓代碼做的事情：首先，將字符串轉換為 html，然后，獲取 id 為"granpost"+result['id']的 div 並將其存儲在success變量中。 最后，在我的頁面中顯示該success div。

這不起作用，我的頁面中唯一顯示的是：'[object Object]'

並且 console.log 正在返回： m.fn.init [prevObject: m.fn.init(45), context: undefined]

Answer 1

第一個問題，響應是一個字符串，您將它用作對象。 所以看起來像

.then(response => response.text())
.then(result => {})

應該使用json

.then(response => response.json())
.then(result => {})

---

現在輸出：

您正在混合 DOM 和 jQuery。 因此，您將 jQuery 對象附加到 DOM 元素。 這就是為什么您要獲得對 HTML 中對象的引用的原因。 改變

let div = document.createElement('div')

到

const div = $('<div></div>')

並改變

document.querySelector('#plis').append(div);

到

$('#plis').append(div);

---

您還使用帶 ID 的過濾器。 過濾器正在運行它所擁有的級別上的元素。 因為它是一個 id，我假設你有一個。 所以你應該使用find。

var success = $(result2).find("#granpost"+result['id']); 

Answer 2

另一個解決方案：將此提取的父響應更改為.json()然后：

fetch("", {
      headers: {
        "Content-type": "charset=UTF-8",
      }
    })
    .then(response => response.text())
    .then(result2 => {


        var doc = new DOMParser().parseFromString(result2, "text/html");

        je = doc.querySelector(`#granpost${result['id']}`)


        div.append(je);

        $('#plis').append(div);
    });
```