Question

i have a page which has the HTML code of:

 <div id="WF120412">
            <div id="F120412" class=editable>
                <h1 name=title>1. New Chapter</h1>
                <DIV name="note"></DIV>
            </div>
        </div>
        <div id="WF120413">
            <div id="F120413" class=editable>
                <h1 name=title>2. New Chapter</h1>
                <DIV name="note"></DIV>
            </div>
        </div>

The css code

.editable {
    cursor:default; padding: 1px;  position:relative;}

ok now when i click a button I would like to dynamically append a NEW line of code below to the above content without refreshing the page

 <div id="WF120414">
            <div id="F120414" class=editable>
                <h1 name=title>3. New Chapter</h1>
                <DIV name="note"></DIV>
            </div>
        </div>

The Code which i used to add is this

$("#rightPaneContent").append(newChNote); where newChNote is the new <div>...</div>

The latest added 3. New Chapter got appear but the css style does not apply to it

Answer 1

I hope this addresses your issue, http://jsfiddle.net/yq9TT/3/

Under the assumption that your rightPaneContent is the container, Use append and then innerHTML as illustrated in the example.

EDIT : Encompasses the Color issues as the user requested.