如何创建类似jsfiddle的所见即所得

Question

I'm trying to create my own jsfiddle funcionality.

Three textboxes with some codes, but have no idea how to make (and remake) files with their contents.

Or, is there another way to play the code, without creating files ?

 $('.button').on('click', function(){ // create demo.css, demo.html and demo.js // open a new tab and play all the code }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class='txthtml'> <div class='parent'> <div class='title'>lorem 01</div> <div class='title'>lorem 02</div> <div class='title'>lorem 03</div> </div> </textarea> <textarea class='txtcss'> .parent{ background:gold; } .title{ margin:5px 0; backgorund:lightgreen; } </textarea> <textarea class='txtjs'> $('.title').on('click', function(){ console.log('clicked'); }); </textarea> <br><br> <button>CLICK</button> 

Answer 1

Below, you can find a very simple example that you want.

For render html into your view, you can juste get the value from your textarea and paste in into your content that when you want to do

 const code = document.querySelector('.code'); const btn = document.querySelector('.btn'); const render = document.querySelector('.render'); btn.addEventListener('click', () => { const getHTML = code.value; render.innerHTML = getHTML; }) 

 .code { width: 200px; height: 200px; } 

 <textarea class="code"></textarea> <button class="btn">go</button> <div class="render"></div> 

Answer 2

create iframe and write the content to the iframe. jsFiddle Demo , not working here because not allowed to aceess iframe.

 $('button').on('click', function() { var addJquery = $('#addJqury').is(':checked') var html = $('.txthtml').val(), css = $('.txtcss').val(), js = $('.txtjs').val(), output = '<style>' + css + '</style>' + html + '<script>' + js + '<\\/script>'; if (addJquery) output = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\\/script>' + output; var iframe = window.results.document; iframe.write(output); iframe.close(); }); 

 textarea{min-height:80px;min-width:200px} iframe{width:100%;height:100%;display:block} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <textarea class="txthtml"> <div class='parent'> <div class='title'>lorem 01</div> <div class='title'>lorem 02</div> <div class='title'>lorem 03</div> </div> </textarea> <textarea class='txtcss'> .parent{ background:gold; } .title{ margin:5px 0; backgorund:lightgreen; } </textarea> <textarea class='txtjs'> $('.title').on('click', function(){ console.log('clicked: ' + $(this).html()); }); </textarea><br> <input type="checkbox" id="addJqury" checked> Add Jquery? <br><br> <button>CLICK</button> <hr>Results: <hr> <iframe name="results" src="about:blank"></iframe>