createElement and appendChild

**msen** · 07-29-2010 06:38 AM

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>

**Fang** · 07-29-2010 07:00 AM

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);

**msen** · 07-29-2010 07:50 AM

still no luck...I am testing it IE 8

document.createTextNode("New element") works like a charm

**Kor** · 07-29-2010 08:13 AM

Originally Posted by msen

still no luck...I am testing it IE 8

document.createTextNode("New element") works like a charm

So? It works or not? It should.

**msen** · 07-29-2010 08:15 AM

I tested and then posted...Doesnt work

**msen** · 07-29-2010 08:17 AM

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?!

**Kor** · 07-29-2010 08:54 AM

Originally Posted by msen

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.

**msen** · 07-29-2010 10:01 AM

Originally Posted by Kor

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

**Declan1991** · 07-29-2010 10:12 AM

Originally Posted by msen

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.

**msen** · 07-29-2010 10:19 AM

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.

**Declan1991** · 07-29-2010 12:53 PM

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.

**Fang** · 07-29-2010 12:56 PM

What happened to the text content???

Code:

newElement.appendChild(document.createTextNode('New element'));

**msen** · 07-30-2010 02:52 AM

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

**Fang** · 07-30-2010 03:01 AM

... 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?

**Kor** · 07-30-2010 03:38 AM

Originally Posted by msen

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: createElement and appendChild

Thread Tools

Display

createElement and appendChild

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions