javascript - 无法使用 jQuery 添加 html 标签和关联数据

Question

我已经使用 jQuery 很短一段时间了，目前我正在使用一个网站，用户将登录，然后 jQuery 将从服务器获取数据并将其附加到现有的 html 代码中。我在 stackoverflow 中对此进行了很多搜索，我当前的代码实际上是我在这里学到的内容的总结。我尝试过加载函数，但后来我发现它已被弃用。

我的目的是在文件加载后添加数据，或者通过任何方式使用户能够查看数据。我还需要添加 id，以便以后可以添加某些行为。这两个功能都可以从两个html文件访问(index.html和profile.html > profile.html将在登录后加载)

我的代码如下。

function changePage(mainArray, length)
{
    location.href="temp.html";
    addData(mainArray, length);
}



$(function() {

    function addData(mainArray, length)
    {
        alert("entry 1");
        for(i = 0; i < length; i++)
        {
            var id1 = "h3"+i;
            var id2 = "p"+i;

            var newHeader= $('<h3></h3>'); //create a new h3
            $(newHeader).attr('id', id1); //set the id attribute of newHeader
            $(newHeader.html(mainArray["title"][i])); //set the innerHtml of the header
            var newPara = $('<p></p>'); //create a new p
            $(newPara).attr('id', id2); //set p id attribute
            $(newPara).html(mainArray["desc"][i]); //add descr
            $('#div1').append(newHeader);
            $('#div1').append(newPara); //add them to dom.
        }
        $("h3").text("View Summary");
        console.log("does it work?");
    }
});

Answer 1

您的问题可能更具描述性，但我的理解是您正在使用jquery执行异步请求，然后将一些元素附加到包含响应的某些部分的DOM。您引用“加载文件后添加数据”，这可能意味着您需要将代码放入 jquery 的基本文档就绪函数中:

$( document ).ready(function() {
  //your code here
});

-简写版本

$(function() {
    //your code here
});

现在，您问题的核心是在我们获取数据后添加元素。尝试一些更接近这个的东西:

function addData(mainArray, length)
{
    for(i = 0; i < length; i++)
    {
    var id1 = "h3"+i;
    var id2 = "p"+i;

    var newHeader= $('<h3></h3>'); //create a new h3
    $(newHeader).attr('id', id1); //set the id attribute of newHeader
    $(newHeader.html(mainArray["title"][i]); //set the innerHtml of the header
     var newPara = $('<p></p>'); //create a new p
     $(newPara).attr('id', id2); //set p id attribute
     $(newPara).html(mainArray["desc"][i]); //add descr
     $('#div1').append(newHeader);$('#div1').append(newPara); //add them to dom.

    }
    $("h3").text("View Summary");
    console.log("does it work?");
}