更改 div 的内容 - jQuery

Posted 2023-05-07

【中文标题】更改 div 的内容 - jQuery

【英文标题】：Change content of div - jQuery

【发布时间】：2011-10-31 15:19:29

【问题描述】：

当点击其中一个 LINKS 时，如何更改此 div 的内容？

<div align="center" id="content-container">
    <a href="#" class="click cgreen">Main Balance</a>
    <a href="#" class="click cgreen">PayPal</a>
    <a href="#" class="click cgreen">AlertPay</a>
</div>

【问题讨论】：

类似问题可以参考：***.com/questions/1309452/…

【参考方案1】：

您可以订阅链接的 .click 事件并使用 .html 方法更改 div 的内容：

$('.click').click(function() 
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').html(linkText);

    // cancel the default action of the link by returning false
    return false;
);

但是请注意，如果您替换此 div 的内容，您分配的点击处理程序将被销毁。如果您打算在需要附加事件处理程序的 div 中注入一些新的 DOM 元素，则应在插入新内容后在 .click 处理程序内执行此附件。如果保留了事件的原始选择器，您还可以查看 .delegate 方法来附加处理程序。

【讨论】：

我如何才能将同一页面上另一个 div 中的内容加载到 #content-container 中？

@Oliver 'Oli' Jensen，像这样：$('#content-container').html($('#someOtherDivId').html());

感谢上帝！我意识到#div 不能被 .val(); 改变。相反，我们应该使用 .html();使其工作的功能！ :D @cuSK 谢谢

实时保护程序@DarinDimitrov

【参考方案2】：

您需要在这里使用 2 个 jQuery 函数。

1)click。这将接受一个匿名函数作为它的唯一参数，并在单击元素时执行它。

2)html。这将采用一个 html 字符串作为它的唯一参数，并将您的元素的内容替换为提供的 html。

因此，在您的情况下，您需要执行以下操作：

$('#content-container a').click(function(e)
    $(this).parent().html('<a href="#">I\'m a new link</a>');
    e.preventDefault();
);

---

如果您只想添加内容到您的 div，而不是替换其中的所有内容，您应该使用append：

$('#content-container a').click(function(e)
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
);

---

如果您希望新添加的链接在点击时也添加新内容，您应该使用event delegation：

$('#content-container').on('click', 'a', function(e)
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
);

【参考方案3】：

$('a').click(function()
 $('#content-container').html('My content here :-)');
);

【参考方案4】：

你也可以试试replacewith()

$('.click').click(function() 
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').replaceWith(linkText);

    // cancel the default action of the link by returning false
    return false;
);

.replaceWith() 方法通过一次调用从 DOM 中删除内容并在其位置插入新内容。

【参考方案5】：

尝试使用 jQuery 更改 div 的内容。

查看更多@Change content of div using jQuery

$(document).ready(function()
    $("#Textarea").keyup(function()
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output").text(currentText);
    );
);

【参考方案6】：

试试$('#score_here').html=total;