Question

我有一个奇怪的问题，我正在使用jQuery将一些HTML附加到h1标签。我在工作中使用的CMS是我无法访问后端的，因此我必须做一些技巧才能使工作正常。我正在使用的代码是...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">
$(function() { 
var html = '<span style = "font-size: 10pt; font-style: italic; display: block;">Tools to help make your farm profitable and successful</span>';
$('.mainContent h1').first().html(html); });
</script>

现在，我已经在jsfiddle上测试了此脚本，并且该脚本运行正常，可以附加到H1标签上，并且一切正常。但是，当实际页面加载它时，它将整个html变量视为一个字符串，并且实际上是在打印出HTML（标记和全部），而不是如您所愿地呈现它。

您会明白我的意思here

我尝试了许多不同的变体，但似乎仍然无法在页面上使用它。有任何想法吗？预先谢谢你。

Answer 1

您的CMS在检测到字符串中的尖括号时可能会干扰。这是不使用尖括号而使用jQuery创建DOM元素的另一种方法：

$(function() { 
    var span = $(document.createElement('span')).text('Tools to help make your farm profitable and successful').css({
            display: 'block',
            fontSize: '10pt',
            fontStyle: 'italic',
        });
    $('.mainContent h1').first().empty().append(span)
});

假设您要从页面中删除文本Become Ag Savvy，以上方法应该可以正常工作。

如果要保留它，而仅将新的跨度附加到它，则删除对.empty()的调用。

当然，这完全取决于CMS保持<script>标签完好无损（并且不将其转换为<script>）。

Answer 2

您是否尝试过使用document.createElement()创建span标签？像这样：

<body class="mainContent">

    <h1></h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
    $(function() {

        var el = document.createElement('span');
        el.style.cssText = "font-size: 10pt; font-style: italic; display: block;";
        el.innerHTML = "Tools to help make your farm profitable and successful";

        $('.mainContent h1').first().html(el); 

    });
    </script>

</body>

Answer 3

对于大多数代码，您可以尝试使用普通的JavaScript来绕过CMS的编码器：

var elem = document.createElement('span');
elem.setAttribute("style","font-size: 10pt; font-style: italic; display: block");
elem.innerHTML = 'Tools to help make your farm profitable and successful';
$('body').append(elem);

jQuery Append不使用HTML标签

3 个答案: