Javascript insideHTML 弄乱了 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=""。

innerHTMl 替换后，模式仍然打开，但选择不可见。

当我使用 Chrome 开发工具检查模态(在 ajax 替换之后)时，我看到第一个输出(具有正确的选择)，但它没有显示。

这是由innerHTML引起的还是我的错误使用造成的？

顺便说一句，我正在 macOS High Sierra (10.13.2) 和 Chrome (63.0.3239.108) 上进行测试，这两个版本都包含在最新的可用更新中。该网站托管在 docker 容器中，但我不认为问题可能来自这里。

Answer 1

After investigating, I find that the innerHTML is not proper HTML.

这是正确的 HTML。

参见boolean attributes :

A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value.

因此，两组 HTML 表达了相同的信息，并且都正确地表达了。

将 HTML 转换为 DOM，然后要求浏览器将 DOM 转换为 HTML，将为您提供规范化的 HTML，而不是原始 HTML。所以这种变化是正常的。

<小时/>

When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.

问题中的代码都不能解释它没有显示。这一定是由代码的其他部分引起的。