This is the image of my current task.
https://i.sstatic.net/Ze2Oc.png
I managed to retrieve HTML tags using
document.getElementById("code").textContent = document.getElementById("code-output").innerHTML;
The content within "code-output" spans from the header above to just before the rectangle box. The "code" ID corresponds to the rectangle box where I intend to showcase the aforementioned HTML tags.
My objective is to create a new line after each HTML tag (lower box). Is there a method to accomplish this?
Thank you.
Here is the code snippet:
document.getElementById("code").textContent = document.getElementById("code-output").innerHTML;#container {
width: 80%;
margin: 0 auto;
text-align: justify;
}
#code {
display: block;
height: auto;
overflow-y: scroll;
font-family: "Courier";
font-size: 18px;
padding: 20px;
border: 1px solid #DCDCDC;
}<div id="container">
<div id="code-output">
<h1> Sample Heading </h1>
<p>
...
</p>
<p>...
</p>
<h2>Lorem Ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>
...
</p>
</div>
<!-- code output -->
<code id="code">
</code>
</div>
<!-- end of container -->