Как получить идентично написанный HTML? - PullRequest
Новая
       60

Как получить идентично написанный HTML?

1 голос
/ 21 октября 2019

Я хочу взять 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>

1 Ответ

2 голосов
/ 21 октября 2019

Если стилизовать выходной элемент (demo) с помощью CSS white-space:pre-wrap, его содержимое будет перенесено так, как вам нужно.

Из MDN:

предварительная упаковка

Последовательности пробелов сохраняются. Строки разбиваются на символах новой строки, на
и, при необходимости, для заполнения полей. 

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>
...