Inserting HTML comments onto page using Javascript

Question

I have a Javascript function that is supposed to insert a string formatted in a certain fashion onto a page for a data analytics tool used by another team. The Javascript executes without error, but whenever I look at the page source of the page, it appears that the comment is not present on the page. Does anyone have any ideas what the issue could be? Has anyone had any experience with writing comments onto the page? I thought maybe jQuery was having any issue with writing HTML comments, but it turns out that using just plan Javascript DOM manipulation functionality doesn't work either.

var test_comment = "<!--This is my comment for data analytics-->";

renderTealeafGrid: function(analyticsString) {

    var homePage,
        analyticsInfo;

    if($('.analyticsInfo').length===0) {
        homePage = document.getElementById('homePage');
        analyticsInfo = document.createElement('span');
        analyticsInfo.setAttribute('class','analyticsInfo');
        analyticsInfo.innerHTML = analyticsString;
        homePage.appendChild(analyticsInfo);
    }
}

renderTealeafGridUsingJQuery: function(analyticsString) {
    if($('.analyticsInfo').length===0) {
        $('#homePage').after('<span class="analyticsInfo hide">' + analyticsString + '</span>');
    }
}

jeffjenx · Accepted Answer · 2013-07-29 18:55:23Z

3

None of the logic that you presented does anything with the test_comment variable.

As others have noted, simply View Source will display the original source code of the page, not any DOM changes after the page has been loaded. You will need to Inspect the source using Firebug or Chrome Dev Tools.

Also, if you want to properly add a comment to the DOM, you would use the document.createComment() method.

answered Jul 29, 2013 at 18:55

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

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

Comments

Prasanth · Accepted Answer · 2013-07-29 18:53:21Z

1

// Assuming you are simply viewing source of the page.

Your problem is, jQuery manipulates DOM after it had been built.

And DOM is built based on the source of the page which is what you are seeing through 'view source'.

To view the modified source, either inspect element or use firebug like tool.

You can also get the source through jQuery. Try alerting a .html() of the element you are updating.

answered Jul 29, 2013 at 18:53

Prasanth

5,2962 gold badges31 silver badges62 bronze badges

Comments

user2625787 · Accepted Answer · 2013-07-29 18:52:06Z

0

If you use the old-fashioned view source tool, you will probably see the original source. You can verify the changes in FF by using the Inspect Element array of tools. They show the current DOM, after updates.

answered Jul 29, 2013 at 18:52

user2625787

Collectives™ on Stack Overflow

Inserting HTML comments onto page using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related