title: How do you set an attribute value that is a JSON literal within a DOM
body: <p>I am trying to set the value of a key value in a JSON literal that is contained with a  tag,  for example, in the snippet below the data-info is the JSON literal.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;video
    id=&quot;myPlayer_1&quot;
    width=&quot;90%&quot;
    poster=&quot;videos/posters/NoVideoPoster.png&quot;
    data-info=&quot;{&quot;start_time&quot;: &quot;71522&quot;, &quot;end_time&quot;:&quot;71622&quot;, next_video:&quot;0&quot;}&quot;&gt;
  &lt;/video&gt;
  </code></pre>
  <p>Now I can read the attribute using the following code:</p>
  <pre class="lang-js prettyprint-override"><code>var ar = JSON.parse(videoElement.getAttribute(&quot;data-info&quot;))
  console.log(&quot;next video&quot; + ar.next-_video);
  </code></pre>
  <p>but setting it is proving difficult, for example:</p>
  <pre class="lang-js prettyprint-override"><code>videoElement.setAttribute(&quot;data-info.next_video&quot;, &quot;1&quot;);
  </code></pre>
  <p>produces:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;video
    id=&quot;myPlayer_1&quot;
    width=&quot;90%&quot;
    poster=&quot;videos/posters/NoVideoPoster.png&quot;
    data-info=&quot;{&quot;start_time&quot;: &quot;71522&quot;, &quot;end_time&quot;:&quot;71622&quot;,next_video: &quot;0&quot;}&quot;
    data-info.next_video = &quot;1&quot;&gt;
  &lt;/video&gt;
  </code></pre>
  <p>Which is obviously not correct.   Can anyone help?</p>