纯JavaScript替代jQuery的.html()方法

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!")
        }
      })
    })

- user4932805

---

几乎每一行都使用jQuery，不仅仅是处理响应的部分。因此，您可能已经加载了jQuery库。那么您可以直接使用它。如果您只想禁用呈现原始HTML，请尝试使用$(element).text(responseText)。 - Malk

你可以随时查看jQuery源文件。 - John Hartsock

在您的网站页脚中使用element.innerHTML = '<some divs>'基本上可以消除ready和许多旧的、性能不佳的jQuery方法的需要。 - thednp

Answer 1

你可以使用 textContent ：

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

element.textContent = responseText;

- Oriol

Answer 2

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

---

如果您不想使用jQuery，可以通过DOM的innerHTML属性（https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML）实现与.html()相同的功能。

如果您想要实现与.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之前的版本中不受支持）。

- Scott Marcus

---

"innerText"不是一个标准术语，而是IE浏览器的专用词汇。 - Oriol

@ScottMarcus 我没有添加括号，而是使用Markdown将您的文本转换为链接。另外，我不确定您是否了解polyfill的工作原理。它只是检查功能的存在，并在JavaScript中重新创建它以适应旧版本浏览器。这不像插件或Flash小程序等。 - ndugger

@ScottMarcus 你应该意识到这是互联网...每个人都直接参与了这个答案。 - Sterling Archer

我的初始修订已经获得批准，因为社区认为它提高了可读性。你的帖子由于长URL难以跟踪。我只是想帮忙。请不要那么消极。 - ndugger

@SterlingArcher 你明白吗？我在传达我的答案和经验，而不是互联网的。 - Scott Marcus