Javascript innerHTML 与 html 属性混淆答案

【问题标题】：Javascript innerHTML messing with html attributesJavascript innerHTML 与 html 属性混淆
【发布时间】：2018-01-05 04:41:14
【问题描述】：

我正在尝试在物化模式中进行选择。到目前为止一切正常，但是当我使用 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 容器中，但我不认为问题可能来自这里。

【问题讨论】：

标签： javascript html html-select innerhtml

【解决方案1】：

经过调查，我发现innerHTML不是正确的HTML。

它是正确的 HTML。

见boolean attributes:

一个没有赋值的布尔属性（例如checked）隐含地等同于一个分配了空字符串的布尔属性（例如checked=""）。因此，它代表了真正的价值。

所以这两组 HTML 表达了相同的信息，并且都正确地表达了。

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

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

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

【讨论】：

好的，谢谢，我不知道布尔属性。什么样的事情会导致选择不出现？

【解决方案2】：

问题是由于在 Materialise 中实现了选择。

我还没有遇到任何问题，所以我没有正确阅读文档。它写道，必须使用 jQuery 初始化选择。

所以我加了

$('select').material_select()

并重新初始化模态

$('.modal').material_select()

现在一切正常。

【讨论】：