How to get a processing script to run in a div

Question

I am making a program that requires a string to be turned into a processing.js script. Currently, the code below makes a <script type="text/processing" data-processing-target="canvas"> tag and adds a string in it but how do I get it to run?

 function runProcessing() {
            var input = "<script type=\"text/processing\" data-processing-target=\"canvas\">";
            input += document.getElementById("userInput").value;
            document.getElementById('processingCode').innerHTML = input;
            console.log(document.getElementById('processingCode').innerHTML);
        }

In outher words, How do I turn this...

void setup() {}

Into this...

<script type="text/processing" data-processing-target="canvas">
void setup() {}
</script>

And run it.

Answer 1

You would just need to create a new Processing instance, passing in the target canvas and the sketch source. You do not need to actually add in the html into the dom

var canvas = document.getElementById('yourCanvasID');
var source = document.getElementById("userInput").value;

var instance = new Processing(canvas, source);

But if you do wish to add it in as html, you should be able to call Processing.reload() after adding in the html to reinitialize the sketches