JavaScript innerHTML與html屬性混淆

Question

我正在嘗試在物化模式內進行選擇。 到目前為止，一切正常，但是當我用ajax請求刷新模式選擇的內容時，選擇消失了。

經過調查，我發現innerHTML不是正確的HTML。

這是我所擁有的：

let modal = htmlResponse.find('#modal')
let modal_old = document.getElementById('modal')
console.log(modal)
console.log(modal.innerHTML)
modal_old.innerHTML = modal.innerHTML

控制台日志如下：

<div class="modal-content">
  <h4>Title</h4>
  <p>Some Text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled selected>Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

其次是

<div class="modal-content">
  <h4>Title</h4>
  <p>Some text</p>
  <select id="mySelect" name="mySelect">
    <option value="" disabled="" selected="">Select one user</option>
    <option value="2" id="2 ">Name 1</option>
    <option value="4" id="4 ">Name 2</option>
  </select>
</div>
<div class="modal-footer">
  <a href="#" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
  <a href="#" class="modal-action waves-effect waves-red btn-flat btn-transfer">Ok</a>
</div>

如我們所見， disabled和selected被替換為disabled=""和selected="" 。

更換innerHTM1之后，模態仍處於打開狀態，但是選擇不可見。

當我使用Chrome開發人員工具檢查模式（在ajax替換之后）時，我看到了第一個輸出（具有正確的選擇），但未顯示。

這是由於innerHTML還是我的用法不當引起的？

順便說一句，我正在使用最新版本的Chrome（63.0.3239.108）在macOS High Sierra（10.13.2）上進行測試。 該網站托管在docker容器中，但我不認為問題可能出在這里。

Answer 1

經過調查，我發現innerHTML不是正確的HTML。

這是正確的 HTML。

請參閱布爾屬性 ：

沒有為其分配值（例如，選中）的布爾屬性隱式等效於為其分配了空字符串（即，checked =“”）的布爾屬性。 結果，它代表了真實的價值。

因此，這兩組HTML表示相同的信息，並且都正確執行。

將HTML轉換為DOM，然后要求瀏覽器將DOM轉換為HTML，將為您提供標准化的HTML，而不是原始HTML。 因此更改是正常的。

---

當我使用Chrome開發人員工具檢查模式（在ajax替換之后）時，我看到了第一個輸出（具有正確的選擇），但未顯示。

問題中的任何代碼都無法解釋其未顯示。 那一定是由代碼的其他部分引起的。

Answer 2

問題是由於在Materialize中實現了select。

我還沒有任何問題，所以我沒有正確閱讀文檔。 編寫的內容是必須使用jQuery初始化選擇。

所以我加了

$('select').material_select()

並重新初始化模態

$('.modal').material_select()

現在一切正常。