www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: createElement and appendChild

  1. #1
    Join Date
    Jul 2010
    Posts
    18

    createElement and appendChild

    Hi forum,

    I am using this code
    Code:
        setTimeout(function() {
            var newElement = document.createElement('<a>New element</a>');
            var X = document.getElementById('myDiv').appendChild(newElement);
            var Y = document.getElementById('myDiv').childNodes.length;
        }, 2000);
    to create an element and add it to a div, but the newly instantiated element does not appear. var Y is increased every time I run the code, which in my mind means that an element is added, but does not appear. Any ideas???

    Here is the HTML
    HTML Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5._Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
        <link href="Stylesheet1.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="menuFunctions.js"></script>
        <script type="text/javascript" src="chapter8.js"></script>
        <script type="text/javascript" src="chapter9.js"></script>
        <script type="text/javascript" src="chapter10.js"></script>
    </head> 
    <body>
        <form runat="server" id="theForm">
            <ul id="list">
                <li onmouseover="mouseOverMenu('chapter8Div')" onmouseout="mouseOut('chapter8Div')">Chapter 8: The BOM
                    <div id="chapter8Div">
                        <a onclick="nodeOne()">Window Positions<br />Window Size<br />Poping up Windows<br />Pop Up blockers<br />Intervals and Timeouts</a>
                        <hr />
                        <a onclick="chapter8_nodeTwo()">System Dialogs<br />The screen object<br />The Navigator object</a>
                        <hr/>
                        <a onclick="chapter8_nodeThree()">Detecting Plug ins</a>
                        <hr />
                        <a onclick="chapter8_nodeFour()">QueryString arguments</a>
                        <hr />
                        <a onclick="chapter8_nodeFive()">Location</a>
                        <hr />
                        <a  onclick="chapter8_nodeSix()">Manipulating location<br />History object</a>
                    </div>
                </li>
                <li onmouseover="mouseOverMenu('chapter9Div')" onmouseout="mouseOut('chapter9Div')">Chapter 9: Client Detection
                    <div id="chapter9Div">
                        <a id="testCapability" onclick="chapter9_nodeSeven()">Capability detection</a>
                    </div>
                </li>
                <li onmouseover="mouseOverMenu('Chapter10Div')" onmouseout="mouseOut('Chapter10Div')">Chapter 10: The DOM
                    <div id="Chapter10Div">
                        <a onclick="chapter10_nodeOne()">Manipulating nodes<br />Document information<br />Locating elements<br />Special collections</a>
                    </div>
                </li>
            </ul><br />
            <asp:Button ID="Button1" Text="Click to generate query string" runat="server" onclick="Button1_Click1" 
                style="height: 26px"/>
        </form>
        <div id="myDiv">
        </div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    createElement takes an element name, only in IE can you use a string.
    Code:
    var newElement = document.createElement('a');
    newElement.appendChild(document.createTextNode('New element'));
    document.getElementById('myDiv').appendChild(newElement);

  3. #3
    Join Date
    Jul 2010
    Posts
    18
    still no luck...I am testing it IE 8

    document.createTextNode("New element") works like a charm
    Last edited by msen; 07-29-2010 at 08:53 AM.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by msen View Post
    still no luck...I am testing it IE 8

    document.createTextNode("New element") works like a charm
    So? It works or not? It should.

  5. #5
    Join Date
    Jul 2010
    Posts
    18
    I tested and then posted...Doesnt work

  6. #6
    Join Date
    Jul 2010
    Posts
    18
    I want to work with the DOM, adding and removing elements via Dynamic Scripts and this is very important. Thus far I can only append TextNodes!!!Cool?!

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by msen View Post
    I tested and then posted...Doesnt work
    You posted nothing. Post your new code, after you have made the Fang's suggested changes, please. Better post a link to a test page, if any.

  8. #8
    Join Date
    Jul 2010
    Posts
    18
    Quote Originally Posted by Kor View Post
    You posted nothing. Post your new code, after you have made the Fang's suggested changes, please. Better post a link to a test page, if any.
    What I ment to say was that I tested in IE8 before posting in the first place, plus that had already tried Fangs suggestion.
    Test page is not available I am working on my PC, experimenting with JavaScript, its not a project.
    I think its has to to with the HTML structure of the document

  9. #9
    Join Date
    Aug 2007
    Posts
    3,767
    Quote Originally Posted by msen View Post
    I think its has to to with the HTML structure of the document
    If you would like help, it would be advisable to post the updated code you are now using and the relevant HTML that pertains to that code. Otherwise, people are unlikely to waste their time trying to guess what you have and haven't done.

  10. #10
    Join Date
    Jul 2010
    Posts
    18
    Although the updated code is slightly modified there you go

    Code:
      setTimeout(function() {
            var newElement = document.createElement('a');
            var X = document.getElementById('myDiv').appendChild(newElement);
            var Y = document.getElementById('myDiv').childNodes.length;
        }, 2000);
    the corresponding HTML is already posted on the top of the page, but there you go:
    HTML Code:
    <&#37;@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5._Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
        <link href="Stylesheet1.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="menuFunctions.js"></script>
        <script type="text/javascript" src="chapter8.js"></script>
        <script type="text/javascript" src="chapter9.js"></script>
        <script type="text/javascript" src="chapter10.js"></script>
    </head> 
    <body>
        <form runat="server" id="theForm">
            <ul id="list">
                <li onmouseover="mouseOverMenu('chapter8Div')" onmouseout="mouseOut('chapter8Div')">Chapter 8: The BOM
                    <div id="chapter8Div">
                        <a onclick="nodeOne()">Window Positions<br />Window Size<br />Poping up Windows<br />Pop Up blockers<br />Intervals and Timeouts</a>
                        <hr />
                        <a onclick="chapter8_nodeTwo()">System Dialogs<br />The screen object<br />The Navigator object</a>
                        <hr/>
                        <a onclick="chapter8_nodeThree()">Detecting Plug ins</a>
                        <hr />
                        <a onclick="chapter8_nodeFour()">QueryString arguments</a>
                        <hr />
                        <a onclick="chapter8_nodeFive()">Location</a>
                        <hr />
                        <a  onclick="chapter8_nodeSix()">Manipulating location<br />History object</a>
                    </div>
                </li>
                <li onmouseover="mouseOverMenu('chapter9Div')" onmouseout="mouseOut('chapter9Div')">Chapter 9: Client Detection
                    <div id="chapter9Div">
                        <a id="testCapability" onclick="chapter9_nodeSeven()">Capability detection</a>
                    </div>
                </li>
                <li onmouseover="mouseOverMenu('Chapter10Div')" onmouseout="mouseOut('Chapter10Div')">Chapter 10: The DOM
                    <div id="Chapter10Div">
                        <a onclick="chapter10_nodeOne()">Manipulating nodes<br />Document information<br />Locating elements<br />Special collections</a>
                    </div>
                </li>
            </ul><br />
            <asp:Button ID="Button1" Text="Click to generate query string" runat="server" onclick="Button1_Click1" 
                style="height: 26px"/>
        </form>
        <div id="myDiv">
        </div>
    </body>
    </html>
    I have already given you this information.

  11. #11
    Join Date
    Aug 2007
    Posts
    3,767
    As suspected, you did not copy Fang's code correctly. You have been provided with the solution. Since you are so reticent and reluctant to provide information to those helping you in their free time, I won't "provide" you with the information again.
    Last edited by Declan1991; 07-29-2010 at 01:56 PM.

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What happened to the text content???
    Code:
    newElement.appendChild(document.createTextNode('New element'));

  13. #13
    Join Date
    Jul 2010
    Posts
    18
    I copied the JavaScript principle Fang was talking about, did not copy paste his code...please read my original post...

    this forum isnt very helpful

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    ... to create an element and add it to a div, but the newly instantiated element does not appear.
    It is added, but without text content the anchor would not be visible.

    Also the JavaScript snippet and the html given in your first post have no correlation.
    How are we to know when and where setTimeout is called?

  15. #15
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by msen View Post
    I have already given you this information.
    And Fang already told you that you have to modify that code. Which you didn't. So, how can you say that the Fang's advice doesn't work if you didn't apply it?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles