实现在网页中实时预览html标签元素1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!--
// Author: WeiyiGeek
// Description: 实现在网页中实时预览html标签元素
// Blog: weiyigeek.top
-->
<!-- 标签元素 -->
<div class="result" style="border: 1px solid black;padding: 0px 10px 6px 10px;line-height: 1.2;">
<strong>实时结果输出:</strong>
<div class="output" style="min-height: 50px;">请点击执行,即可显示结果!</div>
<strong>可编辑代码:</strong>
<textarea class="htmlcode" class="input" style="min-height: 100px;width: 95%"><h1> WeiyiGeek Blog => <p> 花开堪折直须折,莫待无花空折枝。 </p> </h1>
</textarea>
<input class="reset" type="button" value="执行显示" onclick="output0.innerHTML= textarea0.value;">
</div>
<!-- JS脚本 -->
<script>
const textarea0 = document.getElementsByClassName('htmlcode')[0];
const output0 = document.getElementsByClassName("output")[0];
</script>

WeiyiGeek.实现在网页中实时html标签元素预览图