how to add the imported component with js？

Question

(function test() {
  var el = document.createElement('a-entity');
  document.querySelector('a-scene').appendChild(el);
  el.setAttribute(' text-geometry', {
    value: '你',
    font: '#optimerBoldFon'
  })
  el.setAttribute(' material', {
    color: '#66E1B4'
  })
  el.setAttribute(' position', {
    position: '-4 2 2'
  })


})() //wrong

this way works

<a-entity text-geometry="value: 你; font: #optimerBoldFont" material="color: #66E1B4" position="-4 2 -411"></a-entity>

Can someone tell me why? Or tell me how to do it?

Answer 1

Looks like it's those spaces that are catching you out - el.setAttribute("material", { //stuff }); would work, but el.setAttribute(" material" wouldn't...