Don't know how use .appendchild to the body of a content form

**JasonsmithOO1** · Feb 3, 2012 16:29

Sorry if this is a very simple question for you folks.

I have a master form and a content form.

I want to create an element (p) and add some text to it and display it on the content form (not on the master form). With the current code, it always displays on the Master form. I want it to display the newly created p element on the master form.

This is how the content form looks like:

Content Form:

Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/QRMDMS.Master" AutoEventWireup="true" CodeBehind="Javascript_CreatingAndAddingElementsInForLoop.aspx.cs" Inherits="FHLBSF.QRMDMS.WebUI.Javascript_CreatingAndAddingElementsInForLoop" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<body>
    <p>assa/p>
    
    <script type="text/javascript" language="javascript">

        var varPelement = document.createElement("p");
        
        document.body.appendChild(varPelement);
        
        varPelement.appendChild(document.createTextNode("Hello Basam"));
        
        
    </script>
</body>
</asp:Content>

Master Form:

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="QRMDMS.master.cs" Inherits="WebUI.DMS" %>

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


    
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
  
</head>
<body>
    <form id="form1" runat="server">
    
  
     <table width="100%" class="maintable">
   
        
        <tr>
                        
            <td class="style6"  valign="top" bgcolor="PapayaWhip">
                 <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                     onselectednodechanged="TreeView1_SelectedNodeChanged" 
                     ImageSet="Arrows" Font-Bold="False" Font-Names="Courier New" 
                     ForeColor="Black" border="solid dimgray">
                     <SelectedNodeStyle BorderStyle="Dotted" />
                </asp:TreeView>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
       
            </td>
            <td class="style5"  valign="top">
                <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">
        
                </asp:ContentPlaceHolder>
            </td>
        </tr>
              
        </table>  
    
   
    
    </form>
</body>
</html>

**chris.upjohn** · Feb 4, 2012 05:35

Could you please review the code your posted above as i can only see one form been the master, the JavaScript code however clearly shows why it's always been appended to the master form as your using document.body which will always append the new element as a child of <body>. To avoid this target the content form directly by using the document.getElementById method, see the below example:

Code JavaScript:

var ele = document.createElement('p');
 
// Append the new <p> element to the content form
document.getElementById('content-form').appendChild(ele);

**JasonsmithOO1** · Feb 6, 2012 10:37

Master form:

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="QRMDMS.master.cs" Inherits="FHLBSF.QRMDMS.WebUI.QRMDMS" %>

<!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="QRMDMS.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
  
</head>
<body>
    <form id="form1" runat="server">
    
     
    
    <div>
        <img src="media/fhlbsflogo.gif" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="LabelPageTitle" runat="server" Text="QRM Assist" 
            Font-Bold="True" Font-Size="X-Large"></asp:Label>
                
    </div>
     <table width="100%" class="maintable">
   
        
        <tr>
                        
            <td class="style6"  valign="top" bgcolor="PapayaWhip">
                 <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                     onselectednodechanged="TreeView1_SelectedNodeChanged" 
                     ImageSet="Arrows" Font-Bold="False" Font-Names="Courier New" 
                     ForeColor="Black" border="solid dimgray">
                     <SelectedNodeStyle BorderStyle="Dotted" />
                </asp:TreeView>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
       
            </td>
            <td class="style5"  valign="top">
                <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server">
        
                </asp:ContentPlaceHolder>
            </td>
        </tr>
              
        </table>  
    
   
    
    </form>
</body>
</html>

Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/QRMDMS.Master" AutoEventWireup="true" CodeBehind="Javascript_CreatingAndAddingElementsInForLoop.aspx.cs" Inherits="FHLBSF.QRMDMS.WebUI.Javascript_CreatingAndAddingElementsInForLoop" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<body>
    <p>assa/p>
    
    <script type="text/javascript" language="javascript">

        var varPelement = document.createElement("p");
        

        document.getElementById('Conten1').appendChild(varPelement);

        varPelement.setAttribute("id", "PElement");
        
        var i = document.getElementById("PElement");
        
        i.setAttribute("Text","Hello world");
        
        
        
        
    </script>
</body>
</asp:Content>

**chris.upjohn** · Feb 6, 2012 16:14

You posted code but i have no idea what your trying to tell me by not saying anything so I'll take a swing, from what i see above the following things are wrong:

Your targeting an element in your DOM which doesn't exist, i believe your JavaScript was meant to say Content1 instead of Conten1
Your re-selecting the the <p> element from the DOM again to set an attribute which doesn't exist, refer to the first snippet of code in your initial post as you correctly created a text node there

Also as a rule of thumb always set your attributes, text nodes and what ever else before appending it to the DOM as it will stop any flickering that can occur when inserting text and such after it has been appended.

User Tag List

Thread: Don't know how use .appendchild to the body of a content form

Thread Tools

Display

Don't know how use .appendchild to the body of a content form

Bookmarks

Bookmarks

Posting Permissions