html5 - 這個程式碼顯示功能如何實現？

Question

我想知道，左邊是html js ，右邊顯示，這樣的網頁是怎麼做到的？
它的原理是什麼？

#我下載了wp fiddle，發現不能用在我最新版本的wordpress，想自己實作。

提交程式碼的時候，觸發了一個submitTryit() 函數，這個函數倒很簡單

function submitTryit()
{
var t=document.getElementById("TestCode").value;
t=t.replace(/=/gi,"w3equalsign");
t=t.replace(/script/gi,"w3scrw3ipttag");
document.getElementById("code").value=t;
document.getElementById("tryitform").action="v.asp";
validateForm();
document.getElementById("tryitform").submit();
}
function validateForm()
{
var code=document.getElementById("code").value;
if (code.length>5000)
    {
    document.getElementById("code").value="<h1>Error</h1>";
    }
}

Answer 1

左邊是一個表單。書寫程式碼，右邊是iframe，左邊程式碼form的target設為右邊iframe即可

Answer 2

這個頁面使用了iframe，見下圖

Answer 3

左邊p#contenteditable，右邊p.html(contenteditable.html())不行麼？