Something that has caught my attention recently is the behavior of my website's AJAX implementation. When my site receives a response, it is inserted into div elements using the .innerHTML method. For example:
$("#cont-btn")
.click(function() {
var colourID = document.getElementById("colour")
.value;
var styleID = document.getElementById("style")
.value;
var sizeID = document.getElementById("size")
.value;
if (done == 0) {
if (cat == 0) {
var catag = document.getElementById("category")
.value;
$.get("catHan.ashx", {
cata: catag
})
.done(function(tD) {
cat = 1;
document.getElementById("style")
.innerHTML = tD;
$("#style")
.slideToggle("slow");
});
} else {
During my investigation with Google Chrome's Developer Tools, I noticed that the page source appears to update accordingly. However, when I actually view the page source itself, the changes do not seem to reflect?
My development environment revolves around C# and ASP technologies. Is this normal behavior? I find it quite puzzling why the inspected element reflects the updates but the actual viewed source does not.
(I'm particularly concerned because search engine bots typically crawl through page sources for indexing purposes)
Here's an image illustrating the issue when viewing the source: https://i.sstatic.net/Km51c.png
As seen in the above image, the added elements are not visible in the source.