Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    22
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Create element with Javascript ... With Javascript

    Hy there guys i need to create a new javascript element with javascript and appendit ... does anyone know how is this possible ?

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    yes, it's possible.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Jun 2013
    Posts
    22
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    yes, it's possible.
    Code:
    var s = document.createElement('script');
    
        s.type = 'text/javascript';
    
        var code = 'alert("lucas")';
    
        try {
    
          s.appendChild(document.createTextNode(code));
    
          document.body.appendChild(s);
    
        } catch (e) {
    
          s.text = code;
    
          document.body.appendChild(s);
    
        }

    Can someone make better than this ? it's not working and i don't like to use s.appendChild(document.createTextNode(code));

    Better ... I need to putt one function insde of a text/javascript .... how can i make this ?
    Last edited by Lucas Azevedo; 06-27-2013 at 05:04 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    what's wrong with just
    Code:
    var s = document.createElement('script');
     s.type = 'text/javascript';
     var code = 'function testIt (){alert("lucas")}';
     s.text = code;
     document.body.appendChild(s);
    
     testIt();
    ?
    Last edited by xelawho; 06-27-2013 at 05:07 PM.

  • #5
    New Coder
    Join Date
    Jun 2013
    Posts
    22
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    what's wrong with just
    Code:
    var s = document.createElement('script');
     s.type = 'text/javascript';
     var code = 'function testIt (){alert("lucas")}';
     s.text = code;
     document.body.appendChild(s);
    
     testIt();
    ?
    The function needs to execute inside of the appendChild soo that method doesnt work

    Code:
    var s = document.createElement('script');
     s.type = 'text/javascript';
     var code = 'function testIt (){alert("lucas")}';
     s.text = code;
    testIt();
     document.body.appendChild(s);

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Lucas Azevedo View Post
    The function needs to execute inside of the appendChild
    I think you might have to explain that a little more (unless somebody else understands it)

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    @xelawho

    Playing around with your previous example and ran into a problem.
    Is there a reason why this should not work as well?

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta charset="utf-8">
    
    </head>
    <body>
    <script type="text/javascript">
     var s = document.createElement('script');
     s.type = 'text/javascript';
     var code = 'function testIt (msg){alert(msg)}';
     s.text = code;
     document.body.appendChild(s);
     testIt('Lucas');
    
     var t = document.createElement('input');
     t.type = "button";
     t.value = 'Test It Too';
     t.text = 'Abraham';
     t.onclick='function testIt2 (){alert(this.text)}';
     document.body.appendChild(t);
    </script>
    
    </body>
    </html>

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I guess the main problem is that you are supplying the onclick with a string where, as you know, it expects script. Of course you could always do
    Code:
    t.onclick=function testIt2 (){alert(t.text)};
    but I suspect that would be defeating the purpose

    of course you could eval the string (there, I've said it - crucify me), but it doesn't take you much further:
    Code:
    t.onclick=function () {eval('alert(t.text)')};
    I guess I'm not 100% sure of what your experiment was aiming at...

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Lucas Azevedo View Post
    Can someone make better than this ? it's not working
    Your code works fine for me as long as you make sure the body element exists first. Wrap your code in a function and call it with document.addEventListener("DOMContentLoaded", function_name) or place the script element within the body element as jmrker did.

    Quote Originally Posted by Lucas Azevedo View Post
    and i don't like to use s.appendChild(document.createTextNode(code));
    To append script element text without using node methods, you can use the script element-specific text property, the HTML-specific innerHTML property, or the generic textContent property. Examples:

    Code:
    var script = document.createElement("script");
    var code = "document.defaultView.alert('Lucas')";
    script.text = code;
    // or script.innerHTML = code;
    // or script.textContent = code;
    Quote Originally Posted by Lucas Azevedo View Post
    s.type = 'text/javascript';
    This code is completely pointless. The default value is text/javascript, so there's no need to specify it.

    Quote Originally Posted by xelawho View Post
    Iof course you could eval the string (there, I've said it - crucify me), but it doesn't take you much further:
    Code:
    t.onclick=function () {eval('alert(t.text)')};
    xelawho, you just soiled whatever reputation you had by that single use of eval.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Code:
    script.innerHTML = code;
    causes runtime error in IE (8 at least)

    Code:
    script.textContent = code;
    causes object expected error in IE (8 at least)

    xelawho, you just soiled whatever reputation you had by that single use of eval.
    lucky we're not on SO, huh? I'd probably be wetting my pants and pleading for upvotes...

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by Lucas Azevedo View Post
    Code:
    var s = document.createElement('script');
    
        s.type = 'text/javascript';
    
        var code = 'alert("lucas")';
    
        try {
    
          s.appendChild(document.createTextNode(code));
    
          document.body.appendChild(s);
    
        } catch (e) {
    
          s.text = code;
    
          document.body.appendChild(s);
    
        }

    Can someone make better than this ? it's not working and i don't like to use s.appendChild(document.createTextNode(code));

    Better ... I need to putt one function insde of a text/javascript .... how can i make this ?
    all you need to do is eval(code), no need to add a script tag that does nothing.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    If you are going to add a script tag then put the code it is to contain in a separate file and attach that as the src attribute.

    If you have the code actually in the script already then simply define it as a Function and then execute it. No need for eval.

    Code:
    var code = 'alert("lucas")';
    var func = new Function(code);
    func();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by felgall View Post
    If you are going to add a script tag then put the code it is to contain in a separate file and attach that as the src attribute.

    If you have the code actually in the script already then simply define it as a Function and then execute it. No need for eval.
    that depends on the code, if globals/locals are being jump-started into life, then Function won't work, while eval will. adding a new external script intrinsically calls eval, so there's nothing wrong about using it do do the same thing without http traffic...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by rnd me View Post
    that depends on the code, if globals/locals are being jump-started into life, then Function won't work, while eval will. adding a new external script intrinsically calls eval, so there's nothing wrong about using it do do the same thing without http traffic...
    You can't use globals or any variables defined elsewhere when you use eval either unless you identify that you are using antiquated rather than current JavaScript by omitting the "use strict"; statement
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #15
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Lucas Azevedo View Post
    Hy there guys i need to create a new javascript element with javascript and appendit ... does anyone know how is this possible ?
    document.body.appendChild( document.createElement( 'script' ) ).text = 'alert( "lucas" )';


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •