尝试换行按钮和项目

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 中完全包含它，请使用蓝色字体颜色构建我在那里给您的示例。

Answer 2

您有几个选项可以获取按钮下方的行。您可以将跨度交换为div，并在跨度之前添加按钮

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

另一种选择是更改 HTML 并添加换行符或为 span 提供"显示：块"属性。

如果您确实不想交换将按钮和元素添加到 DOM 的顺序，则可以使用 position 来移动它们。 http://www.w3schools.com/css/css_positioning.asp

所以例如你可以添加这个 CSS

span : {
     display : block;
     font-family : // list of fonts ;
}