Dynamic content using .append() or .innerHTML() and SEO

Question

I was looking for some clarification on something I am looking to implement, I would like to know how a Google Crawl will see this and if it would be detrimental to SEO.

On my webpage I have an empty h1 tag with an id <h1 id="title"></h1>

And within my (inline) JavaScript before the </body> tag I have:

const url = window.location.href
const title = document.getElementById("title")

if(url.match(".it")) {
 title.append("Benvenuto!")
} else if(url.match(".de")) {
 title.append("Herzlich Willkommen!")
} else {
 title.append("Welcome!")
}

I am checking to see the domain the user has landed on and inserting text in the correct language into elements within the page based on the domain after the DOM has rendered.

When I inspect the page in chrome, the correct text has been appended inside the H1 element. So the H1 element is not empty. It appears like this:

<h1 id="title"> "Welcome!" </h1> (for example)

How does a Google Crawl see this? Does Google crawl see the h1 for each domain having it's own title or does it see an empty H1 tag or does it see something else?

I found this single article, but wanted to get the opinions from a wider range of people before I go ahead.

3. Dynamically Inserted Content This is clearly an important one: dynamically inserted text, images, links and navigation. Quality text content is critical to a search engine’s understanding of the topic and content of a page. In this era of dynamic websites it’s even more important SEOs get on top of this.

These tests were designed to check for dynamically inserted text in two different situations.

1. Test the search engine’s ability to account for dynamically inserted text when the text is within the HTML source of the page.

2. Test the search engine’s ability to account for dynamically inserted text when the text is outside the HTML source of the page (in an external JavaScript file).

Result: In both cases, the text was crawled and indexed, and the page ranked for the content. Winning!

Source.

Edit: Additionally I have now found this article with examples showing the content injected after DOM has loaded has been indexed by Google. However, as this will be a major change on the site any advice for or against this practice would be appreciated from anyone's experience or knowledge.

Thanks for any advice or info!

(I won't simply be using this method to insert Welcome text into the page, there will be more critical content, tags and links being inserted. This is just a simplified example)

Answer 1

Google can render and crawl JavaScript, but it's still better to avoid JavaScript for better search performance. source