使用 jQuery 获取点击的元素 html？答案

【问题标题】：Get clicked element html with jQuery?使用 jQuery 获取点击的元素 html？
【发布时间】：2012-09-15 23:24:00
【问题描述】：

我正在监听一些元素的点击。我想在用户单击一个时显示警报，警报的内容应该是单击元素的 innerHtml。

$(".tags-container > p").click(function (event) {
    alert('inner html');
    });

我可以通过将代码添加到 html 来做到这一点，但我更喜欢使用 jquery 侦听器。

如何在警报中显示元素的 innerHTML？

【问题讨论】：

您能详细说明一下吗？你想点击哪个元素？您的问题：如何在点击时获得点击的内部 html？ 不清楚。
如果您通过 jQuery 的 html() 或 JavaScript 的 innerHTML 获得内部 HTML，它会这样做，给您内部的 HTML 标记。如果您只想获取 <p> 标记内的文本，而忽略其中任何可能的 HTML 标记，那么您最好使用 jQuery 的 text()。

【解决方案1】：

使用jQuery的html()从<p>标签中取出HTML：

$(".tags-container > p").click(function(event) {
    alert($(this).html());
});

使用 JavaScript 的 innerHTML 从 <p> 标记中获取 HTML：

$(".tags-container > p").click(function(event) {
    alert(this.innerHTML);
});

使用 jQuery 的 text() 仅从 <p> 标记中获取文本，这将去除所有 HTML 并返回组合文本。

$(".tags-container > p").click(function(event) {
    alert($(this).text());
});

【讨论】：

【解决方案2】：

$(".tags-container > p").click(function () {
    alert($(this).html());
});

【讨论】：

为什么不直接使用this.innerHTML？
jquery 是 jquery 是 jquery :)
@GungFoo：我完全赞成使用标准方法，但是如果使用 innerHTML 没有跨浏览器问题并且 HTML 值是 OP 想要的，那么为什么要初始化一个附加对象来环绕 @ 987654323@ 只是为了调用一个方法来获取一个你已经拥有的值而无需开销？

【解决方案3】：

使用jQuery的html()函数

$(".tags-container > p").click(function (event) {
    alert($(this).html());
    });

【讨论】：

【解决方案4】：

正如他们所说，只需使用 $.html()。就个人而言，我只使用 innerHTML 因为 $.html() 过滤掉了 br elems 等；我只是把它们变成换行符。

$(".tags-container > p").click(function () {
   alert(this.innerHTML.replace(/<br>/, '\n'));
});

【讨论】：