时间戳

首页 > 解决方案 > jQuery Append 不使用 HTML 标签

jquery - jQuery Append 不使用 HTML 标签

问题描述

我有一个奇怪的问题，我正在使用 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（标签和所有内容），而不是像您期望的那样呈现它。

你可以在这里看到我的意思

我尝试了许多不同的变体，但似乎仍然无法让它在页面上工作。有任何想法吗？先感谢您。

标签： jqueryhtml

解决方案

当您的 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>标签完整（而不是将它们转换为&lt;script&gt;）。

推荐阅读