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 24
  1. #1
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    creating a new div..

    I want to creat a new div when the user clicks...

    something like onClick="create_div()"

    The only way I know to do this would be to have a div and make it visible on click. But I don't want that. I want to be able to really create it (just for the time of that session of course)
    Shawn

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, you always have the DOM functions that you can use. document.createElement('div'); Then you probably need to put it somewhere in the code as well, and maybe fill it with content.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    so:

    Code:
    function put()
    {
    
    document.createElement('div')
    
    }
    
    then
    
    <body onClick="put()">
    How do I fill that div with content?
    Is there a way to name that div so I can reference to it later and apply actions to it?
    Also, can I "uncreate" that div?
    document.deleteElement('the div's name')

    Thanks for the help, this will greatly help me
    Shawn

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    function put() {
    var n = document.createElement('div');
    n.id = "easyref";
    n.innerHTML = "blah blah blah"; //easy, but not necessary standards-compliant (AFAIK)
    // standards-compliant
    //n.appendChild(document.createTextNode("blah blah blah"));
    document.body.appendChild(n);
    }
    ...and....

    Code:
    <body onload="put();">
    ...then you can reference it like any other element, by means of its ID (in this case, the id is 'easyref').

    To delete, you can use a function like this:

    Code:
    function pull() {
    var n = document.getElementById("easyref");
    n.parentNode.removeChild(n);
    }
    Hope that helps!

    Happy coding!
    Last edited by nolachrymose; 10-13-2003 at 02:28 AM.

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Northern California
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lets see if I can be of some help? First off yes it would be easy to asign it a name but I would recomend instead giving it an ID!

    Example:
    Code:
    <script>
    function makeEle(eleName){
     
    //creates element
     var d=document.createElement("DIV");
     
    //gives element an id
     d.id=eleName;
     
    //gives element text
     d.createTextNade("this is my text");
    }
    
    </script>
    
    
    
    <body onClick="makeEle('myDiv')">
    As for deleting I do not have an answer sorry!

    EDIT: Oooops Someone beat me! Ohwell good luck!
    Last edited by scriptkeeper; 10-13-2003 at 02:22 AM.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Touchť, scriptkeeper.

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    so:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function put()
    {
    var x=document.createElement("DIV");
    x.id="div_name";
    x.background-color=red;
    //this is the part I'm not sure about
    x.onClick="x.parentNode.removeChild(x);";
    //end of the part I'm not sure about
    x.appendChild(document.createTextNode("<p>text here</p>");
    }
    -->
    </script>
    </head>
    <body onClick="put()">
    </body>
    </html>
    First, the red problem. Second, If I click on the body twice, will it create two divs?
    Thanks for your help, I am now thinking that what I want to do is in fact possible
    Shawn

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, a few problems....firstly, this line:

    Code:
    x.background-color=red;
    ...ought to be this:

    Code:
    x.style.backgroundColor = "red";
    Secondly, this line:

    Code:
    x.onClick="x.parentNode.removeChild(x);";
    ...won't work like you are wanting it to, because you are not setting the event with a function. Try this instead:

    Code:
    x.onclick = new Function("x.parentNode.removeChild(x);");
    Thirdly, there is a problem with this line:

    Code:
    x.appendChild(document.createTextNode("<p>text here</p>");
    ....because a text node is simply text, and therefore your paragraph elements will be rendered as plain text. That is why I'd suggest you start off with innerHTML property first, and slowly build your way up:

    Code:
    x.innerHTML = "<p>text here</p>";
    ....but if you really wanted to do it the W3C DOM Recommendation way, it would look something like this:

    Code:
    var pEl = document.createElement("p");
    pEl.appendChild(document.createTextNode("text here"));
    x.appendChild(pEl);
    Also, at the end of the function you need it to append it to some container (I'd guess you'd want to append it to the body):

    Code:
    document.body.appendChild(x);
    And yes, if you click twice, two divisions will be created.

    Hope that helps!

    Happy coding!

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    so:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function put()
    {
    var x=document.createElement("DIV");
    x.id="div_name";
    x.style.background-color="red";
    x.onclick = new Function("x.parentNode.removeChild(x);");
    x.innerHTML="<p>text here</p>";
    document.body.appendChild(x);
    }
    -->
    </script>
    </head>
    <body onClick="put()">
    </body>
    </html>
    right?

    Thanks for the help everyone

    Could you explain the new function() thingy, never heard of it...
    Shawn

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just one slight problem...this line:

    Code:
    x.style.background-color="red";
    ....ought to be this:

    Code:
    x.style.backgroundColor="red";
    The function thing is just an object that returns a function. It would be the same as making a function and setting that to onclick event instead.

    Hope that helps!

    Happy coding!

  • #11
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ok thanks to you all, I think I have enough to get pretty far in my project now
    Shawn

  • #12
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hmm, maybe not, when I click on the divs, they don't delete themselves...
    What's up with that??

    And, this line:

    x.onClick = new Function("x.parentNode.removeChild(x)");
    could I make it close div_id instead of x (make it close the same thing, but get that thing with it's name instead of x..)?
    Last edited by shlagish; 10-13-2003 at 05:12 AM.
    Shawn

  • #13
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This also doesn't work, it puts divs in when I click on the put button, but it doesn't take any of them out when I click the remove button...
    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    
    function put()
    {
    var x=document.createElement("DIV");
    x.id="div 1";
    x.style.backgroundColor="red";
    x.innerHTML="<p>text here</p>";
    document.body.appendChild(x);
    }
    
    function remove()
    {
    x.parentNode.removeChild(x);
    }
    
    
    -->
    </script>
    </head>
    <body>
    <input type="button" onClick="put()" value="put" />
    <input type="button" onClick="remove()" value="remove" />
    </body>
    </html>
    Shawn

  • #14
    Regular Coder
    Join Date
    Apr 2003
    Location
    Northern California
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The reason it does not remove the element is because x has no value! It only has a value inside the put function because it is a local variable! Give this a try! I tested it works IE6!

    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    
    function main()
    {
       var x, d;
       d=document.buttons;
         d.addEle.onclick=function()
           {
           x=document.createElement("DIV");
           x.id="div 1";
           x.style.backgroundColor="red";
           x.innerHTML="<p>text here</p>";
           document.body.appendChild(x);
           }
        d.remEle.onclick=function()
          {
           x.parentNode.removeChild(x);
          }
    }
    -->
    </script>
    </head>
    <body onload="main()">
    <form name="buttons">
    <input type="button" onClick="put()" value="put" name="addEle" />
    <input type="button" onClick="remove()" value="remove" name="remEle" />
    </form>
    </body>
    </html>
    Good Luck And Good Coding!
    Last edited by scriptkeeper; 10-13-2003 at 08:18 AM.

  • #15
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Try this instead:
    Code:
    x.onclick=function(){
        this.parentNode.removeChild(this);
    }
    Or, if you want to do it from another node:
    Code:
    d.onclick=function(){
        var
            node=document.getElementById([string elementId]);
        node.parentNode.removeChild(node);
    }
    Last edited by liorean; 10-13-2003 at 08:54 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  
    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
    •