我如何获得完全相同的 html？

Question

我想从样式中获取 innerHTML 并在 div 演示中展示它。但是应该写成一样的，例子
我得到：

#one {width: 50px; height: 50px; background-color: red; }

我需要得到；

#one{
  width: 50px;
  height: 50px;
  background-color: blue;
}

所以一个在另一个下面，有空格，记事本写的++

function myFunction() {
  var x = document.getElementById("style").innerHTML
  document.getElementById("demo").innerHTML = x;
}

<head>
  <style id="style">
    #one {
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  </style>
</head>

<div id="one"></div>
<div id="demo"></div>
<button onclick="myFunction()">click</button>

Answer 1

如果您使用 CSS white-space:pre-wrap 设置输出元素 (demo) 的样式，其内容将按您需要的方式包装。

来自 MDN：

pre-wrap

Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

function myFunction(){
var x = document.getElementById("style").innerHTML;
document.getElementById("demo").innerHTML = x;
}

#demo {white-space:pre-wrap;} /* does the trick */

<head>
<style id="style">
#one{
    width: 50px;
    height: 50px;
    background-color: blue;
}
</style>
</head>
<div id="one"></div>

<div id="demo"></div>

<button onclick="myFunction()" >click</button>

我如何获得完全相同的 html？

How do I get identically written html?

javascript

css

innerhtml

head