单击时移动按钮并替换为文本

Question

我试图弄清楚如何在单击“button2”时将文本从 JavaScript 添加到页面的正上方。我尝试了不同命令的组合，但无法正确使用。

var theButton = {

  "facts": [
  {
      "Size": "250 pixels",
      "Color": "Black",
      "Font": "Times New Roman",
    }

  ]
};


var largeButton = document.getElementById("button2");
var buttonItems = theButton.facts.length;

largeButton.addEventListener("click", text, false);

function text() {

  for (i = 0; i < buttonItems; i++) {

    largeButton.insertAdjacentHTML("beforebegin", "Size: " + theButton.facts[i].Size + 
    '<br />' + "Color: " + theButton.facts[i].Color +
      '<br />' + "Font: " + theButton.facts[i].Font)
  }
};

button {
  height: 100px;
  width: 100px;
  background-color: black;
  font-family: Times New Roman;
  color: white;
}

#button1 {
  float: left;
}

#button2 {
  float: right;
}

<button id="button1">Button</button>

<button id="button2">Button2</button>

Answer 1

这样试试

var theButton = {

  "facts": [{
      "Size": "250 pixels",
      "Color": "Black",
      "Font": "Times New Roman",
    }

  ]
};


var largeButton = document.getElementById("button2");
var buttonItems = theButton.facts.length;

largeButton.addEventListener("click", text, false);

function text() {

  for (i = 0; i < buttonItems; i++) {

    largeButton.insertAdjacentHTML("beforebegin", "<p>Size: " + theButton.facts[i].Size +
      '<br />' + "Color: " + theButton.facts[i].Color +
      '<br />' + "Font: " + theButton.facts[i].Font) + "</p>"
  }
};

button {
  height: 100px;
  width: 100px;
  background-color: black;
  font-family: Times New Roman;
  color: white;
}

.first {
  margin-right: auto;
}

.second {
  margin-left: auto;
}

<div style="display: flex;">
  <div class="first">
    <button id="button1">Button</button>
  </div>
  <div class="second">
    <button id="button2">Button2</button>
  </div>
</div>

var theButton = {

  "facts": [{
      "Size": "250 pixels",
      "Color": "Black",
      "Font": "Times New Roman",
    }

  ]
};


var largeButton = document.getElementById("button2");
var buttonItems = theButton.facts.length;

largeButton.addEventListener("click", text, false);

function text() {

  for (i = 0; i < buttonItems; i++) {

    largeButton.insertAdjacentHTML("beforebegin", "<div style='float: right;'>Size: " + theButton.facts[i].Size +
      '<br />' + "Color: " + theButton.facts[i].Color +
      '<br />' + "Font: " + theButton.facts[i].Font) + "</div>";
    largeButton.insertAdjacentHTML("beforebegin", "<div class='clearfix'> </div>");
  }

};

button {
  height: 100px;
  width: 100px;
  background-color: black;
  font-family: Times New Roman;
  color: white;
}

#button1 {
  float: left;
}

#button2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

<button id="button1">Button</button>
<button id="button2">Button2</button>

Answer 2

为了不弄乱 HTML，您只需将 button2 父元素的 direction 更改为 rtl。见下面的代码sn-p：

var theButton = { 'facts': [ { 'Size': '250 pixels', 'Color': 'Black', 'Font': 'Times New Roman' } ] },
    largeButton = document.getElementById( 'button2' ),
    buttonItems = theButton.facts.length;

largeButton.addEventListener( 'click', function() {
    for ( i = 0, html = ''; i < buttonItems; i++ ) {
        html = 'Size: ' +
            theButton.facts[i].Size +' <br>Color: ' +
            theButton.facts[i].Color + '<br>Font: ' +
            theButton.facts[i].Font + '<br>'
    }

    largeButton.insertAdjacentHTML( 'beforebegin', html );
}, false )

body {
    direction: rtl
}
button {
    height: 100px;
    width: 100px;
    background-color: black;
    font-family: Times New Roman;
    color: white
}
#button1 {
    float: left
}
#button2 {
    float: right
}

<button id="button1">Button</button>
<button id="button2">Button2</button>

但如果可以动态添加元素，请执行以下操作：

var theButton = { 'facts': [ { 'Size': '250 pixels', 'Color': 'Black', 'Font': 'Times New Roman' } ] },
    largeButton = document.getElementById( 'button2' ),
    buttonItems = theButton.facts.length;

largeButton.addEventListener( 'click', function() {
    for ( i = 0, html = ''; i < buttonItems; i++ ) {
        html = 'Size: ' +
            theButton.facts[i].Size +' <br>Color: ' +
            theButton.facts[i].Color + '<br>Font: ' +
            theButton.facts[i].Font + '<br>'
    }

    var newPel = document.getElementById( 'new' );

    if ( !newPel ) {
        largeButton.insertAdjacentHTML( 'beforebegin', '<p id="new"></p>' );
        newPel = document.getElementById( 'new' )
    }

    newPel.appendChild( largeButton );
    largeButton.insertAdjacentHTML( 'beforebegin', html );
}, false )

button {
    height: 100px;
    width: 100px;
    background-color: black;
    font-family: Times New Roman;
    color: white
}
#button1 {
    float: left
}
#button2, p {
    float: right
}

<button id="button1">Button</button>
<button id="button2">Button2</button>