Dispaly Html Source Code in a Div When Page Load
you want to show the source code webpage in view. use this code it will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Card with Multiple Content Types</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body onload="func()">
<div class="card" style="width: 750px;">
<div class="card-body">
<table style="width:100%">
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
</div>
<div class="card" style="width: 750px;">
<div class="card-body">
<button class="btn btn-success" onclick="myFunction()" >Copy Code</button>
<p class="card-text" id="myInput" style="width: 750px; height: 200px; text-align: justify;overflow:auto;" ></p>
<p class="right-side-header" title="Copy Text" id="text" onclick="copyElementText(this.id)">I am cool</p>
</div>
</div>
</div>
</div>
<pre><code class="inner"></code></pre>
<script>
function func () {
var a = document.querySelector('html');
var b = document.querySelector('.card-text');
b.textContent = a.innerHTML;
}
</script>
</body>
</html>
in the above case, I am taking one card in that I am showing view and HTML source code
when I click on the button HTML source code will be shown. using textContent
textContent: It Returns the text content of an element