how to Append defined functions to script tag of html

Question

Hi: I want to append a js function something like function amb(){console.log("hello")} inside the script tag. But There is a problem in this. Because as the function is append to script tag it says function is not defined when i try to call. if you understand the problem or have any solution to it please help me. Thanks a lot...

 <script id="append_here">
        // the appended function goes in this script
    </script>
    <script>
        a = `function amb() { console.log('hello')}`
        document.getElementById('append_here').append(a)
    </script>
    <div id="a">
        <button onclick="amb()"> amb</button>

    </div>

Can you describe why you want to do that?

Mischa
– Mischa

2022-09-06 11:43:54 +00:00
Commented Sep 6, 2022 at 11:43 — Mischa
– Mischa, Commented Sep 6, 2022 at 11:43

Jaromanda X · Accepted Answer · 2022-09-06 11:45:16Z

1

You can't append content to a script and have the browser "re-parse" the script

You can create a new script tag, add the content, and append that to the body

<script>
  const a = `function amb() { console.log('hello')}`;
  const scr = document.createElement('script');
  scr.textContent = a;
  document.body.append(scr);
</script>
<div id="a">
  <button onclick="amb()"> amb </button>

</div>

answered Sep 6, 2022 at 11:45

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AwaisMehnga Over a year ago

Thanks a lot brother, I have searched for more than seven hours, and you just solved my problem in a snap of finger. May Allah help you a lot

Nitheesh · Accepted Answer · 2022-09-06 11:47:36Z

0

You can use eval aswell

<script id="append_here">
  // the appended function goes in this script
</script>
<script>
  a = `function amb() { console.log('hello')}`;
  document.getElementById("append_here").append(eval(a));
</script>
<div id="a">
  <button onclick="amb()">amb</button>
</div>

answered Sep 6, 2022 at 11:47

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

2 Comments

Jaromanda X Over a year ago

of course, that simply appends the word undefined to that script tag ... you get the same result if you just eval(a) without adding the result to the script for absolutely no reason :p

AwaisMehnga Over a year ago

Thanks a lot for your precious answer, it works too and I'm happy with the results. May Allah gives you more power to help other

Collectives™ on Stack Overflow

how to Append defined functions to script tag of html

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related