title: Polymer: create paper-checkbox with javascript
body: <p>I am creating a form for a survey which should ask for quesions out of a Json object.
  My code works so far, but I feel like I miss knowledge of some polymer or JS functions that would make it more beautiful.
  Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/Kxwp8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kxwp8.jpg" alt="enter image description here"></a></p>
  
  <p>Script:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var questions = [
      {
          "question": "What do you want for christmas?"
          , "mode": "radio"
          , "answers": ["Nintendo", "iPony", "You", "A tiny little Shotgun"]
      }
  ];
  console.log(questions);
  
  function foo() {
      var question = document.createElement('div');
      question.className = 'question';
      question.innerHTML = "Frage:" + questions[0].question;
      console.log(question);
      var surveyQuestions =  document.getElementById("survey-questions");
      surveyQuestions.appendChild(question);
  
      var answers = document.createElement('div');
      answers.className = "answers";
  
      
      questions[0].answers.forEach(buildRadio);
      
      surveyQuestions.appendChild(answers);
  
  
      function buildRadio(item, index) {
          var paperCheckbox = document.createElement('paper-checkbox');
          var br = document.createElement('br');
          paperCheckbox.setAttribute("name",item);
          paperCheckbox.setAttribute("value",item);
          paperCheckbox.getElementsByTagName('div')[1].innerHTML = item;
          paperCheckbox.children[1].innerHTML = item;
  
          answers.appendChild(paperCheckbox);
          answers.appendChild(br);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Another small exmaple for my problem:</p>
  
  <pre><code>&lt;div class="card"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>creates</p>
  
  <pre><code>&lt;div class="card style-scope survey-app"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But</p>
  
  <pre><code>var card = document.createElement('div');
  card.className = "card";
  </code></pre>
  
  <p>only creates</p>
  
  <pre><code>&lt;div class="card"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What would be best practice?</p>