Creating new element <p> in Content form...but gets created on Master form?? Any help

**JasonsmithOO1** · Jan 30, 2012 16:41

[CODE]Hello folks,
New to Javascript.

I have a master form and 2 content forms.

I am practicing Javascript using these 2 content forms. I want to create a new element <p> and create a text node for that element. But it gets created in the Master form instead of content form. The javascript that does this is in Content form. How can I get a reference to Content form and create the element on content form instead of Master form?

This is content form .aspx page:

Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/rates.Master" AutoEventWireup="true" CodeBehind="Javascript_DOMTree.aspx.cs" Inherits="rates.Javascript_DOMTree" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

<p title="The test paragraph">This is a sample of some <b>HTML you might<br>have</b> in your document</p>
<a href="http://www.howtocreate.co.uk/tutorials/javascript/dombasics">DOM Tree example</a>

    <script language="javascript" type="text/javascript">

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

        document.body.appendChild(varnewPElement);

        varnewPElement.appendChild(document.createTextNode("Hello world"));

       
        
</script>


</asp:Content>

This is the master form .aspx page

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="DMS.master.cs" Inherits="DMS.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>
  
    <script src="Scripts/TestScript.js" type="text/javascript">
    </script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
              
       
        .style6
        {
            border: thin double #000000;
            font-family: 'Times New Roman' , Times, serif;
            font-size: medium;
            width: 158px;
        }
              
       
    </style>
</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>

**AussieJohn** · Jan 30, 2012 17:08

It looks like you're simply appending the newly created <p> to the <body>

If you want to append it to a specific area, you first need to have a reference to that area.

e.g. let's say you have the following HTML

HTML Code:

<body>
    <div id="content"></div>
</body>

You could append the para to the #content div like so:

Code JavaScript:

var newPara = document.createElement("p");
newPara.appendChild(document.createTextNode("Hello world"));
 
document.getElementById("content").appendChild(newPara);

It's also good to remember that you can't inject content into elements that do not yet exist, and you should never append content to the body when your script is not a direct child of the body as this will break in Internet Explorer 8 and below. (Though you can get around this issue by using an little DOM Ready wrapper so your code will only run when the DOM is fully loaded. For example: https://gist.github.com/1476064)

**JasonsmithOO1** · Jan 30, 2012 17:16

Ok John. Thanks much Sir.

My mistake was, I never intended to create a new P element in Master form. So the code
document.body.appendChild(varnewPElement); was actually adding the newly created P element to the body element of the master tag.
there is no body element in the Content form.
Understood now.

Greatly appreciate.
Regards
nath

**AussieJohn** · Jan 30, 2012 17:18

Well, that's ok because your content form uses that Master page right?

This JavaScript will only run in the browser, so it will work with the completely rendered out HTML.

**JasonsmithOO1** · Jan 30, 2012 17:20

Yes. I use Master Form in the content form.

User Tag List

Thread: Creating new element <p> in Content form...but gets created on Master form?? Any help

Thread Tools

Display

Creating new element <p> in Content form...but gets created on Master form?? Any help

Bookmarks

Bookmarks

Posting Permissions