Correct way to convert your JavaScript function into a string so it can be inserted into innerHTML

Question

This is what I am doing: I am building a fun in house API Voting System. I am using a client side snippet insert onto page

Like this:

<script src="domain.com/api/scripts/main.js"></script>
<div id="content-wrap" id="ac1e435e-c564-48f8-9f45-338616e7a789"></div>

Now in my main .JS I do all ajax request and modify the #content-wrap with creating new elements and inserting additional JS required to run Voting System.

However big issue I am experiencing is when I write JavaScript that I need to insert into #content-wrap I am currently writing it like this:

script.innerHTML = "$(someting).on('click', funciton(){"
+ "$.ajax({type: 'post',"
+ " url: '" + base + "/api/request', data: $('form').serialize(), "
+ "success: function(response){";

As you can see that can cause lot of issues as I build on it. What is better way to accomplish this or is there a way i can just write my script / code and do something like this.

script.innerHTML = ConvertToString(script.js) OR ConvertToString(function X);

ConvertToString is just an expression I am using to explain what I would like to do instead of what I am doing.

Thank you, I am open to any suggestions. I also must do this in plain JavaScript or with jQuery library so any suggestions to use VueJs, AngularJS or React will be considered as future references.

Thank you again

Additional explanation:

I would like to insert into my script element JavaScript snippet. But my snippet is about 30 lines long currently and might get bigger with time so it is very difficult to code with all the + " code " on every line that I write so that it can be inserted with innerHTML into element and executed on Client end.

So I would instead like to do something like this

element.innerHTML = mysnippetcode // but with out using + "" on each line like shown above

OR

element.append(snippet)

I hope this makes it little more clear

Solution that worked for me was using back ticks to wrap my sinppet and insert it into innerHTML of the element..

Answer 1

Just use the function's name without the () to convert it to a string:

function foo() {
var a = 10;
var b = 20;
var c = a + b;
return c;
}


document.write(foo);

The document.write will result in this string:

function foo() { var a = 10; var b = 20; var c = a + b; return c; }

If you only want the function's body, then you could just normally remove the first and last characters of the string.

I am not entirely sure this is what you wanted, if not, please make yourself more clear.

Alternatively, you could do an eval([insert function code here]) and there would be no need to add the code to the innterHTML of the script, read up on that function if you haven't heard of it.

Or if you want to create a function from a string, you can use new Function([name] ,[function body string]) if you need arguments you have to sandwich them between the 2 parameters.

But my snippet is about 30 lines long currently and might get bigger with time > so it is very difficult to code with all the + " code " on every line that I write

You can use template literals if you want multi-line strings in Javascript, you simply have to replace your quotes with backticks.

See this MDN page if you are interested, or even this StackOverflow answer.