如何使用javascript将数据附加到ol li

时间:2014-03-01 09:08:27

标签: javascript jquery jsp

我需要将数据附加到已经存在的有序列表(ol li)。但我不能使用下面提到的功能追加你能不能请任何人帮助我

这是我的ol li:

<ol class="dd-list" id="classroomdatalist">
    <li class="dd-item" data-id="2">
        <div class="dd-handle classroom_side-bdr"><b>Classroom</b></div>
        <c:forEach items="${records.cList}" var="records1">
            <ol class="dd-list" id="classroomlist${records1.classroomID}">
        <li id="cs1" class="dd-item" data-id="3" value="${records1.levelID}">
                    <div class="dd-handle">
                        <a href="javascript:classroomShow(${records1.classroomID})" id ="classroomName${records1.classroomID}"> ${records1.videoFile}</a>
            <img class="delete_img" alt="" src="../resources/images/Trash.png" title="delete" id="delete_btn"  data-toggle="modal" data-target="#windowTitleconfirmation" onclick="javascript:deleteValues(${records1.classroomID},'classroom')">
                    </div>
                </li>
            </ol>
        </c:forEach>
    </li>
</ol>

这是我追加的javascript函数

function classroomadd(){

    console.log("level"+level);
    var clg = ${param.clg};
    var levelID = level;

    videoFile = document.getElementById("videoFile").value;
    soundFile = document.getElementById("soundFile").value;
    var classroomData = {
        videoFile:videoFile,
        soundFile:soundFile,
        levelID:levelID,
        clg:clg
    };
    $.ajax({
        type : "post",
        url : "classroomAdd",
        data: JSON.stringify(classroomData),
        dataType:'json',
        contentType:'application/json',
        mimetype:'application/json',
        cache : false,
        beforeSend : function(xhr) {
            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-Type", "application/json");
        },
        success : function(response) {
            console.log("Success: "+response.sucess);


            $("#classroomdatalist").append('<li>'+response.sucess+'</li>'); 

            $("#classroomcontent_div").hide();
        },
        error : function(xhr) {
            console.log("Sorry, there was a problem! " + xhr.status);
        },
        complete : function() {
            console.log("Request complete");
        }
    }); 
}

你能帮助任何人.........

2 个答案:

答案 0 :(得分:1)

问题是你包括两次jQuery库。你有:

  • 的jquery-1.8.3.js
  • jquery-1.3.2.min.js&lt; - 删除这个

只保留一个并使用@SkyBuzz提供的代码:

var data = "Some data";
$( "#myId" ).append($('<li/>').html(data)); 

答案 1 :(得分:0)

试试这个

var data="sample";
$("#sampledatalist").append($('<li/>').html(data)); 

我希望这能解决你的问题。

Live demo

并确保在顶部添加了jquery库。