Tryit Editor - Free-Learn

<!DOCTYPE html>
<html>
<head>
<style>

body{
 background-color:#f2f2f2;
}

.MyForm{
 background-color:#fff;
 box-shadow: 2px 5px 30px rgba(0,0,0,.1);
 padding:10px;
 margin-top:20px;
 border-radius:10px;
}

#Result{
 display:none;
}

</style>
</head>
<body dir="rtl">

<div class="MyForm">
<p> انتخاب تگ
 <select id="SelectTag">
  <option>H1</option>
  <option>H2</option>
  <option>H3</option>
  <option>DIV</option>
  <option>P</option>
 </select>
 <input type="text" id="Content" placeholder="محتوای تگ را وارد نمایید">
</p>
<button onclick="Create();">ایجاد کردن تگ</button>
</div>

function Create(){
 var Utag , Utext , CE , Ac , Result;
 Utag   = document.getElementById("SelectTag").value;
 Utext  = document.getElementById("Content").value;
 Result = document.getElementById("Result");

if( Utext == "" ){
 alert("لطفا متن را مشخص کنید");
}else{
 CE = document.createElement(Utag);
 Ac = document.createTextNode(Utext);
 CE.appendChild(Ac);
 Result.appendChild(CE);
 Result.style.display = "block";
}
}

</script>

</body>
</html>

سایت آموزشی فری لرن