javascript - 试图换行按钮和元素

Question

这是我使用的代码 ( http://jsbin.com/ESOdELU/1/edit ) -

var wordRandomizer = {
run : function(targetElem) {
var markup = this.createMarkup();
targetElem.appendChild(markup);
},
createMarkup : function() {
var that = this;
var frag = document.createDocumentFragment();

this.elem = document.createElement('span');

var button = document.createElement('button');
button.innerText = 'Change Item';
button.addEventListener('click', function() {
  that.changeItem();
});

frag.appendChild(this.elem);
frag.appendChild(button);

return frag;
},
changeItem : function() {
var rand = this.getRandInt(1, this.items.length) - 1;
console.log(rand);
this.elem.innerText = this.items[rand];
},
getRandInt : function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
items : [
'itemA',
'itemB',
'itemC',
'itemD'
]
};

wordRandomizer.run(document.body);

我希望能够在按钮下方而不是旁边生成元素。我怎样才能做到这一点？作为奖励，我还想知道如何在无需编辑每个元素的情况下设置元素字体的格式。

Answer 1

这是包含您要求的所有更改的代码:http://jsbin.com/ESOdELU/8/edit

var wordRandomizer = {
  run : function(targetElem) {
    var markup = this.createMarkup();
    targetElem.appendChild(markup);
  },
  createMarkup : function() {
    var that = this;
    var frag = document.createDocumentFragment();

    this.elem = document.createElement('span');
    this.elem.style.color = "blue";

    var button = document.createElement('button');
    var br = document.createElement("br");
    button.innerText = 'Change Item';
    button.addEventListener('click', function() {
      that.changeItem();
    });

    frag.appendChild(button);
    frag.appendChild(br);
    frag.appendChild(this.elem);    

    return frag;
  },
  changeItem : function() {
    var rand = this.getRandInt(1, this.items.length) - 1;
    console.log(rand);
    this.elem.innerText = this.items[rand];
  },
  getRandInt : function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },
  items : [
    'itemA',
    'itemB',
    'itemC',
    'itemD'
  ]
};

wordRandomizer.run(document.body);

您可以在 span 上使用一个类，或者如果您想继续将它完全包含在 JS 中，请以我在此处提供的带有蓝色字体颜色的示例为基础。