如何使用jQuery替换innerHTML？

Question

我已经编写了下面的代码，但是由于安全原因，现在必须使用jQuery编写它。我之前从未使用过jQuery，真的不知道该如何编写。 我不应该混合HTML和JS，应该使用createElement和其他类似的东西。

var demoName1 = "Peter Stone";
function showMessage() {
    var newMsg = '<div id="messageBoxSend">' +
        '<div class="nameSend">' + demoName1 + '</div>' +
        '<div class="text">' +
        ' <div id="FscToolPaneNoseSend">' +
        '</div></div>' +
        document.getElementById('inputText').value;

var a = new Date();
    var b = a.getHours();
    var c = a.getMinutes();
    if (c < 10) {
        c = "0" + c;
    }
    var time = b + ':' + c;

    newMsg += '<div class="time">' + time + '</div>' +
        ' </div></div><br>';
...
}

- candy fan

---

$(...).html(newMsg); 的翻译是：将 newMsg 内容设置为 $() 中选定元素的 HTML 内容。 - casraf

"现在出于安全原因，我必须使用jQuery编写这个代码。" 为什么jQuery更安全？特别是如果你要盲目地将原始HTML放到页面上，这本身就是一个安全漏洞？" - VLAZ

你在原生JavaScript中做了什么？ - Krishna Prashatt

我假设 OP 想在 AJAX 请求中返回标记，因为仅将 HTML 字符串传递给 jQuery 的 .html() 不比他们发布的内容更安全。 - Sean T

@VLAZ 在使用 innerHTML() 时可能会出现很多问题，因此建议在使用之前对 HTML 进行清理。 - designtocode

Answer 1

最初的回答：

你可以尝试以下代码： $('class或id').html(''); $('class或id').html(newMsg);

它可以清空指定元素的内容，或者将新的消息添加到指定元素中。

- Lokendra Singh Panwar

---

这会满足任何安全原因吗？ - VLAZ

Answer 2

jQuery是JavaScript的库，因此如果您认为JavaScript不安全，那么jQuery也是不安全的。此外，jQuery使AJAX更容易，但这并不能证明Jquery比JavaScript更安全。

- Shivani Sonagara

Answer 3

大概是这样的。你应该查看jQuery文档https://jquery.com/

var demoName1 = "Peter Stone";
function showMessage() {
    var input = $('#inputText').val();
    $('.nameSend').html(demoName1 + input);

var a = new Date();
    var b = a.getHours();
    var c = a.getMinutes();
    if (c < 10) {
        c = "0" + c;
    }
    var time = b + ':' + c;

    $('#messageBoxSend').append(time);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="inputText">
<div id="messageBoxSend">
<div class="nameSend"></div>
</div>
<div class=""></div>
<button onclick="showMessage();">Click me!</button>

阅读评论和您的问题后，我意识到应该回答安全性问题。建议在使用 innerHTML() 之前对 HTML 进行清理。

您可以在这里阅读更多有关创建 DOM 元素并安全使用 innerHTML() 的信息 https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page。

- designtocode

---

这如何满足任何 .innerHTML 无法满足的安全问题？ - VLAZ

根据Mozilla的建议，在使用innerHTML()之前最好对HTML进行清理，您可以在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page - designtocode

如果你只是将 innerHTML = code 改为 .html(code)，那么在功能上没有任何区别。而最简单的安全更改内容的方法是避免直接解析 HTML，而是使用 DOM 操作。 - VLAZ