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

JavaScript
1 
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:

<%@ 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>

&lt;script language="javascript" type="text/javascript"&gt;

    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

<%@ 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>

&lt;script src="Scripts/TestScript.js" type="text/javascript"&gt;
&lt;/script&gt;

&lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;
&lt;/asp:ContentPlaceHolder&gt;
&lt;style type="text/css"&gt;


    .style6
    {
        border: thin double #000000;
        font-family: 'Times New Roman' , Times, serif;
        font-size: medium;
        width: 158px;
    }


&lt;/style&gt;

</head>
<body>
<form id=“form1” runat=“server”>

 &lt;table width="100%" class="maintable"&gt;


    &lt;tr&gt;

        &lt;td class="style6"  valign="top" bgcolor="PapayaWhip"&gt;
             &lt;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"&gt;
                 &lt;SelectedNodeStyle BorderStyle="Dotted" /&gt;
            &lt;/asp:TreeView&gt;
            &lt;asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /&gt;

        &lt;/td&gt;
        &lt;td class="style5"  valign="top"&gt;
            &lt;asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server"&gt;

            &lt;/asp:ContentPlaceHolder&gt;
        &lt;/td&gt;
    &lt;/tr&gt;

    &lt;/table&gt;



&lt;/form&gt;

</body>
</html>

2

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


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

You could append the para to the Content div like so:


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)

3

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

4

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.

5

Yes. I use Master Form in the content form.