IE 11将伪内容视为元素内容的一部分

Question

我遇到了一个问题，除了使用data-属性创建一个变通方法外，我没有一个可靠的解决方案。然而，我发现我遇到的行为非常奇怪，我想知道是否有更好的方法来解决它

考虑以下代码：

HTML

<div id="test">This is a test!</div>

CSS

#test:after
{
    content: "...This shouldn't be part of text()!";
}

JS

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        alert($(this).text());
    });
});

我正在处理的问题是，IE 11似乎将:after伪选择器中的内容作为div中内容的一部分。这意味着，当单击div时，IE 11将显示一个警告：

This is a test!...This shouldn't be part of the text()!

然而，我预计会有一条警报：

This is a test!

Firefox和Chrome都显示后一种警报。我想知道是否可以让IE也显示后一个警报，而不使用额外的data--属性或类似的东西。

下面是本例的FIDDLE。

Answer 1

尝试将.text（）更改为.html（），如下所示。它在IE 11.0.9600.17351上运行良好（使用您的版本和此版本）

代码：

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        alert($(this).html());
    });
});

Answer 2

感谢E先生的回答，我想到了一个可能的解决方案。我可以通过获取html()来获取内容，然后将其重写到一个伪div中，再从中获取text()。这么简单的事情似乎需要做很多事情，但它确实有效。

HTML

<div id="test"><span>This is a test!</span></div>

JS

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        var html = $(this).html();
        var text = $("<div />").html(html).text();
        alert(text);
    });
});

请参阅此更新的FIDDLE。