无法使用jQuery添加html标签和相关数据

Question

我使用jQuery的时间很短，目前正在与一个网站进行合作，用户将登录该网站，然后jQuery将从服务器获取数据并将其附加到现有的html代码中。 我在stackoverflow中进行了大量搜索，而我当前的代码实际上是我在这里学到的东西的摘要。 我已经尝试过使用load函数，但是后来我发现它已被弃用。

我的意图是在文件加载后或通过任何使用户能够查看数据的方式添加数据。 我还需要添加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?");
}