$（...）。html（...）在Firefox中将内部HTML呈现为文本？

Question

所以我有一段代码

                // separate pargraph words by spans
                $layer.find('p').each(function(){
                    var words = $(this).html().split(" ");
                    for ( var i = 0; i < words.length; ++i )
                    {
                        words[i] = '<span class="word">' + words[i] + '</span>';
                    }
                    $(this).html(words.join(" "));
                });
                // add event click event on headlines 
                $layer.find('h3').click(function () {
                    $(this).closest('.tower-layer').find('span.word').removeClass('shown');
                    var $wspans = $(this).closest('.tower-layer').find('span.word');
                    for ( var i = 0; i < $wspans.length; ++i )
                    {
                        (function(j){
                            setTimeout(function(){
                                $($wspans[j]).addClass('shown');
                            },j*100);
                        })(i);
                    }
                });

正如您所见，

将HTML分隔为包含在跨度中的单词，并在某些事件中显示它们。我遇到的问题是，在 FireFox 中，span以文本而非DOM元素的形式出现。知道如何解决这个问题吗？或者是否有一些其他潜在的代码味道？