jQuery Append not using HTML Tags

Question

I have a strange issue, I'm using jQuery to append some HTML to an h1 tag. I'm using a CMS here at work that I don't have access to the backend, so I have to do some trickery to make things work. My code I'm using is...

<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>

Now I've tested this script on jsfiddle and it works just fine, it appends to the H1 tag and everything looks proper. When the actual page loads it, however, it's treating the entire html variable as a string and it's actually printing out the HTML (tags and all) instead of rendering it as you'd expect.

You can see what I mean here

I've attempted many different variations of it, but still can't seem to get it to work on the page. Any ideas? Thank you in advance.

The code you've posted seems to work, even through the console on your site. You'll have to be more precise with what exactly you're doing, as it stands now it's not reproducible — baao
– baao, Commented Jun 27, 2018 at 18:50
"I'm using a CMS here " This is probably what's sanitizing the input and converting your HTML to HTML entities — j08691
– j08691, Commented Jun 27, 2018 at 18:51
You're not actually calling append() in your sample code here, either. But yes, I'd imagine that wherever you're entering this script, at least the < chars are being converted to entities. — Paul Roub
– Paul Roub, Commented Jun 27, 2018 at 18:52
View source on the page, you'll see <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().append(html); }); — Paul Roub
– Paul Roub, Commented Jun 27, 2018 at 18:53
try encoding your string like this: <span style = "font-size: 10pt; font-style: italic; display: block;">Tools to help make your farm profitable and successful</span> — Ivan-San
– Ivan-San, Commented Jun 27, 2018 at 18:53

pete · Accepted Answer · 2018-06-27 19:04:36Z

1

Your CMS is likely interfering when it detects the angle brackets in the string. Here's an alternate way of creating DOM elements with jQuery which doesn't use any angle brackets:

$(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)
});

The above should work, assuming you want to eliminate the text Become Ag Savvy from the page.

If you want to keep it, and merely append the new span to it, delete the call to .empty().

This is, of course, entirely contingent on the CMS keeping the <script> tags intact (and not converting them to <script>).

answered Jun 27, 2018 at 19:04

pete

25.2k4 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Lupo Over a year ago

That worked perfectly! Thank you Pete! I should have thought of that but they have me doing a million other things too. Thank you so much!

j08691 · Accepted Answer · 2018-06-27 19:06:50Z

0

You can try and sneak around the CMS' encoder by using plain vanilla JavaScript for most of the code:

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);

answered Jun 27, 2018 at 19:06

j08691

209k33 gold badges269 silver badges281 bronze badges

Comments

Andrew Chart · Accepted Answer · 2018-06-27 19:08:22Z

0

Have you tried using document.createElement() to create your span tag? Something like:

<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>

edited Jun 27, 2018 at 19:08

answered Jun 27, 2018 at 19:02

Andrew Chart

6556 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery Append not using HTML Tags

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related