Is it possible to do some client-side DOM manipulation before document ready?

Question

I am trying to find a way (if possible) to use javascript to add some attributes to an element at render time and before the DOM is fully loaded. I know, that sounds counterproductive, but let me give you some background:

I'm working in an extremely limited templating platform that gives me access to some page variables, but they need some minor string manipulation. I can't leverage any of the ASP preprocessing so it has to happen on the client-side.
Specifically, I am trying to add Schema.org Microdata markup to an element before Googlebot scans through the document contents.
Essentially I need to modify an attribute value from $5.99 to 5.99.

Here's my most recent attempt, which makes the DOM modifications correctly, but not before Google's rich snippet validator processes the page:

<div class="pitinfo"><div class="padleft padright"><%Product.BasePrice%></div></div>

<!-- at page bottom -->
<script type="text/javascript">
    (function() {
        var pricesting = "<%Product.BasePrice%>";
        var price =  pricesting.slice(1);
        $('.pitinfo').attr('itemprop', 'price');
        $('.pitinfo').attr('content', price);
    })();
</script>

After load I get this <div class="pitinfo" itemprop="price" content="9.99">$9.99</div>, however the Rich Snippet Testing tool tells me price is not set.

I have already tried using ASP in my template code but the hosting provider does not allow it.

Is it possible to make the DOM modifications sometime in the middle of the document rendering flow?

@charlietfl It is impossible. I'm trapped inside a black box template engine that doesn't allow direct access to ASP. — tshimkus, Mar 30 '19 at 01:19
Might be that the rich snippet api only reviews what is in server source and doesn't wait for javascript updates. Or it requires some sort of meta tag to tell it to run javascript first. If it is the latter you may not be able to modify the head either server side — charlietfl, Mar 30 '19 at 01:27
Test using the Google Search Consoles URL Inspection Tool which now reports on Product markup and renders the page in the same way Googlebot does. I bet your edit works there. — Tony McCreath, Mar 30 '19 at 16:22
@TonyMcCreath, that worked! I didn't realize the Rich Snippet Testing Tool functioned differently than the Search Console URL inspector. — tshimkus, Mar 30 '19 at 22:12

score 0 · Answer 1 · edited Mar 30 '19 at 01:24

It is possible to insert a <script> tag inside of the <body>. JavaScript inside of the tag is loaded before the HTML after it, so you would be able to edit the element's value before the rest of the HTML/JS is loaded.
For example:

<body>
    <div id="element" value="$5.99"></div>
    <script>
        var element = document.getElementById("element")
        element.value = 5.99;
    </script>
</body>

You can check it out here

Is it possible to do some client-side DOM manipulation before document ready?

1 Answers1