插入动态html内容

时间:2013-03-16 19:35:22

标签: javascript html dhtml

我有一个表单,可以使用“添加问题”按钮添加多个问题。如果单击该按钮,将创建一个新的accordion-group。

<div id="accordion1" class="accordion">
      <div id="group1" class="accordion-group">
           <input type='text' id='question1' class='textbox-input'/>
      </div>
</div>
<input type"button" value="Add Question" id="addQuestion" onclick="javascript:addQuestion();"/>

<script>
 function addQuestion(){
       var previousContent = document.getElementById("accordion1").innerHTML;
       var newContent = "<div id='group2' class='accordion-group'>" +
                        "<input type='text' id='question2' class='textbox-input'/>" +
                        "</div>";
       document.getElementById("accordion1").innerHTML = previousContent + newContent;
 }
</script>

我还有一些脚本可以为文本框提供样式,但这些样式不会应用于添加的新动态内容。此外,每个手风琴组内的选择框都会被禁用。有谁知道如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

这个怎么样:http://jsfiddle.net/PVbRJ/

$("#addQuestion").live('click', addQuestion);


 function addQuestion(){
       var previousContent = $("#accordion1").html();

       var newContent = "<div id='group2' class='accordion-group'>" +
                        "<input type='text' id='question2' class='textbox-input'/>" +
                        "</div>";
       $("#accordion1").html(previousContent + newContent);
 }

答案 1 :(得分:0)

这对我有用。感谢所有的帮助:)

function addQuestion(){     
               var newContent = "<div id='group2' class='accordion-group'>" +
                                "<input type='text' id='question2' class='textbox-input'/>" +
                                "</div>";
               $("#accordion1").append(newContent);
}