Question

我的网页的HTML代码为：

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

css代码

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

现在好了，当我点击一个按钮时，我想动态地将以下代码的新行添加到上面的内容而不刷新页面

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

我以前添加的代码是

$("#rightPaneContent").append(newChNote);其中newChNote是新的<div>...</div>

出现了最新添加的3. New Chapter，但css样式不适用于它

Answer 1

您必须考虑章节ID。如果您添加更多章节，我认为应该增加此ID。

请找到解决方案http://jsfiddle.net/FMPgU/1/。在此解决方案中，考虑了动态ID。如果你使用firebug检查div id，你会发现。我在这里添加一个小技巧。我为这一章添加了一个课程。

标记如下。 notice class =“chapter”。这很关键。我在这里做了诀窍

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

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

        </div>

        <input type="button" id="btnAddChapter" value="Add Chapter" />

脚本在这里

            $('#btnAddChapter').click(function() {
              var lastId = $("#rightPaneContent div.chapter:last").attr("id").split("WF")[1];
             var count = $("#rightPaneContent div.chapter").size();
             count++;
             var newId = parseInt(lastId,10)+1;
             var newChapter = "<div id='WF"+newId+"' class='chapter'>"+
                "<div id='F"+newId+"' class='editable'>"+
                        "<h1 name=title>"+count+". New Chapter</h1>"+
                        "<DIV name='note'></DIV>"+
                 "</div>"+
             "</div>";
             $("#rightPaneContent").append(newChapter);
            });

Answer 2

我希望这可以解决您的问题，http://jsfiddle.net/yq9TT/3/

假设你的rightPaneContent是容器，请使用append，然后使用innerHTML，如示例所示。

编辑：按用户要求包含颜色问题。

CSS无法显示新添加的<div> </div>

2 个答案: