这篇文章给大家分享的是有关html实时效果查看功能的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
html实现实时查看效果的功能
如下面代码，将能够打开新页面查看我们在文本输入域中的代码效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>M</title>
<script type="text/javascript">
window.onload = function () {
console.log(document);
var runBtn = document.getElementById('input');
var runTextArea = document.getElementById('textarea');
runBtn.onclick = function() {
var oNewWin = window.open('about:blank');
oNewWin.document.write(runTextArea.value); }
}
</script>
</head>
<body>
<div>
<input type='button' id="input" value='运行'/><br/>
<textarea rows='10' cols='30' id="textarea" ></textarea>
</div>
</body>
</html>如下图，文本输入框中的table就是我们输入的内容
效果如下所示：
如下图为新页面中的显示效果
同样的我们可以在当前页面进行查看效果，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>M</title>
<script type="text/javascript">
window.onload = function () {
var runBtn = document.getElementById('input');
var runTextArea = document.getElementById('textarea');
var result = document.getElementById('result');
runBtn.onclick = function() {
result.innerHTML = runTextArea.value;
}
}
</script>
</head>
<body>
<div>
<input type='button' id="input" value='运行'/><br/>
<textarea rows='10' cols='30' id="textarea" ></textarea>
</div>
<h6>效果展示：</h6>
<div id="result">
</div>
</body>
</html>效果如下：
效果展示：
感谢各位的阅读！关于html实时效果查看功能的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！