describing the same performer by JSON-LD and HTML

as google says in Introduction to Structured Data :

Markup should not be used to hide content not visible to users in any form, since it might create a misleading or deceptive search experience. For example, if the JSON-LD markup describes a performer, the HTML body should describe that same performer.

I'm wondering if there is a specific way to add the same data in both the JSON-LD and the HTML code or I can use whatever I like to represent my html code (with the same content that is in the JSON-LD) ? , for example:

<!-- script -->
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Question",
    "text": "What is attr_accessor in Ruby?",
    "text": "I am having difficulty understanding Ruby attr_accessors, can someone explain them?",
    "acceptedAnswer": {
        "@type": "Answer",
        "text": "the answer for this qustion is bla bla bla bla",
        "dateCreated": "2010-12-01T22:01Z",
        "author": {
            "@type": "Person",
            "name": "someuser"
        }
    }
}
</script>
<!-- html -->
<div>
<h1>What is attr_accessor in Ruby?</h1>
<p class="question">I am having difficulty understanding Ruby attr_accessors, can someone explain them?</p>
<p class="answer">the answer for this qustion is bla bla bla bla</p>
</div>

Solution

This could be accomplished with jQuery/Javascript, but if you're not familiar with these, this may be a good use-case for dynamically generated structured data with Google Tag Manager.

The basic process of using GTM to do this:

You Create a "Custom HTML" Tag within Google Tag Manager which contains your entire JSON script.
Depending on your needs, you may be able to use GTM's Built-In Variables to select specific HTML elements on your page. You may need to create a "user-defined variable", which basically contains Javascript to select the contents of a specific HTML element.
In your JSON Script - the keys you want to be dynamic will point to your GTM variables that you defined.
You specify which pages you want your script to be added to by adding a GTM 'Trigger'.
On page-load GTM will dynamically fill your JSON-LD script based on the contents of that specific page.

This is extremely scalable, especially when you're trying to add Structured Data to blog posts, or product pages that all use the same template, and therefore have the same basic HTML structure.

There are several tutorials out there that can walk you through this, which I will not link to here, but they can easily be found by Googling "dynamically generated structured data google tag manager".