CODEWITHSUNDEEP
javascriptjqueryhtml
GobiasKoffi
GobiasKoffi

Reputation: 4084

Inserting HTML comments onto page using Javascript

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

Upvotes: 0

Views: 1951

Answers (3)

jeffjenx
jeffjenx

Reputation: 17487

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.

Upvotes: 3

Prasanth
Prasanth

Reputation: 5268

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

Upvotes: 1

user2625787
user2625787

Reputation:

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.

Upvotes: 0

Related Questions