jQuery的.html()的纯JavaScript替代品

Question

以下代码用于ajax加载div.

我唯一的问题是.html()渲染原始 html,所以我认为用纯JS替换它可能是一个好主意,这样我的视图就可以清除任何转义的原始html.

我很想听听你对此的看法.

$(document).ready(function() {
      $('.ajax_load').each(function(index, element) {
        var url = $(element).data('remote-url')
        if (url) {
          $.get(url, function(responseText) {
            $(element).html(responseText);
          })
        } else {
          console.log("missing url for ajax!")
        }
      })
    })

Answer 1

你可以使用textContent:

Node.textContent属性表示节点及其后代的文本内容.

element.textContent = responseText;

Answer 2

jQuery 的.html()方法接受一个字符串并通过 HTML 解析器运行该字符串，以便可以处理任何 HTML 标记并更新 DOM。jQuery 的.text()方法也接受一个字符串，但该字符串（即使它包含 HTML）不会传递到 HTML 解析器进行处理，并且任何标记都会被转义并作为文本内容包含在页面中。

如果您不想使用 jQuery，则可以.html()使用 DOM .innerHTML( https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML ) 属性完成相同的操作。

如果您想完成与 相同的事情.text()，您可以使用专有/旧版.innerText( https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText ) 属性或标准textContent( https: //developer.mozilla.org/en-US/docs/Web/API/Node/textContent ) DOM 属性（但 IE 9 之前的 IE 不支持后者）。