如何用 jQuery 替换 innerHTML？

Posted 2023-05-07

【中文标题】如何用 jQuery 替换 innerHTML？

【英文标题】：How to replace innerHTML with jQuery?

【发布时间】：2019-11-18 22:41:19

【问题描述】：

我已经编写了下面的代码，但出于安全原因，现在我必须使用 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>';
...

【问题讨论】：

$(...).html(newMsg);

"由于安全原因，我现在必须用 jQuery 编写此代码" 为什么 jQuery 会更安全？尤其是如果您试图盲目地将原始 HTML 放在页面上，这会导致安全漏洞吗？

你在 vanilla javascript 中做了什么？

我假设 OP 希望在 ajax 请求中返回标记，因为只是将 html 字符串传递给 jquery 的 .html() 并不比他们发布的更安全

@VLAZ 仅使用innerHTML() 会出现很多问题，因此建议在使用之前对 html 进行清理。

【参考方案1】：

你会试试这个代码

$('class or id').html('');

$('class or id').html(newMsg);

【讨论】：

为什么这会满足任何安全原因？

【参考方案2】：

jQuery 是一个 JavaScript 库，所以是的，如果您认为 JavaScript 不安全，那么 jQuery 也是如此。另外，jQuery 让 AJAX 更容易，但并不能证明 Jquery 比 javascript 更安全。

【参考方案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>

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

您可以在此处阅读更多关于创建 DOM 元素和安全使用innerHTML() https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page

【讨论】：

这如何满足.innerHTML 不满足的任何安全问题？

根据 Mozilla，建议在使用 innerHTML() 之前对 html 进行清理，您可以在此处阅读更多信息developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/…

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