With Google Website Optimizer's multivariate testing, can I vary multiple css classes on a single div?

Question

I would like to use Google Website Optimizer (GWO)'s multivariate tests to test some different versions of a web page. I can change from version to version just by varying some class tags on a div, i.e. the different versions are of this form:

<div id="testing" class="foo1 bar1">content</div>
<div id="testing" class="foo1 bar2">content</div>
<div id="testing" class="foo2 bar1">content</div>
<div id="testing" class="foo2 bar2">content</div>

In the ideal, I would be able to use GWO section code in place of each class, and google would just swap in the appropriate tags (foo1 or foo2, bar1 or bar2). However, naively doing this results in horribly malformed code because I would be trying to put <script> tags inside the div's class attribute:

<div id="testing" class="
  <script>utmx_section("foo-class")</script>foo1</noscript>
  <script>utmx_section("bar-class")</script>bar1</noscript>
">
  content
</div>

And indeed, the browser chokes all over it.

My current best approach is just to use a different div for each variable in the test, as follows:

<script>utmx_section("foo-class-div")</script>
  <div class="foo1">
</noscript>
  <script>utmx_section("bar-class-div")</script>
    <div class="bar1">
  </noscript>
    content
  </div>
</div>

So testing multiple variables requires layer of div-nesting per variable, and it all seems rather awkward.

Is there a better approach that I could use in which I just vary the classes on a single div?

Answer 1

Probably the best way is:

<div id="testing">content</div>

<script>
var testingDiv = document.getElementById('testing');
</script>

<script>utmx_section("foo-class-div")</script>
  <script>
  testingDiv.setAttribute('class', testingDiv.getAttribute('class') + ' foo1');
  </script>
</noscript>
<script>utmx_section("bar-class-div")</script>
  <script>
  testingDiv.setAttribute('class', testingDiv.getAttribute('class') + ' bar1');
  </script>
</noscript>