Javascript Reference - HTML DOM Pre Object

The Pre object represents an HTML <pre> element.

Pre Object Properties

Property	Description
width	Not supported in HTML5. Use style.width instead. Sets or gets the width

Standard Properties and Events

The Pre object supports the standard properties and events.

Example

We can access a <pre> element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<pre id="myPre">
this<!--  www. j a  v a  2  s .c o  m-->
  is 
    a 
      test
</pre>
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myPre").innerHTML;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create a <pre> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w  w w  .j a v a  2 s.co m-->
    var x = document.createElement("PRE");
    var t = document.createTextNode("This is a preformatted text.");
    x.appendChild(t);
    document.body.appendChild(x);
}
</script>
</body>
</html>

The code above is rendered as follows: