jQuery 中有没有办法修改 .html() 以便添加代码而不是覆盖？

Question

I'm doing work to retrieve data from APIs. I'm designing my code to make multiple queries to the API and then adding them to the running list of results in my HTML. Due to the data returned by the API, there isn't a way to get it all in one shot and then slice it up, I need to get it in multiple shots.

Look at this code:

function renderResults(results) {
    return $('#results-section').html(genResults(results));
}

The function renderResults() is being called inside my API call

.fetch(URL)
   .then([code that is working properly])
   .then(call renderResults() here)

I've console logged my API results and tested the API call in Postman so I know it's constructed correctly- just trying to give proper context.

To review, results is the data from the API, results-section is how the results container in my HTML is marked, and the function genResults(results) creates the template HTML with values from results stuck into it.

When you use .html it overwrites everything in the section indicated immediately prior. I'm looking for a way to add the template HTML generated by genResults(results) to any HTML already in the container I have ID'd results-section , not replace what's there. I've tried chaining on .append() but can't seem to find a way to do so successfully.

The obvious solution is to have a for loop create as many results sub-sections as I need, but the problem is that I don't know how many sections I need until I get the results from the API.

Any ideas?

Update:

Answer from Souvik Ghosh worked. I was trying to chain .append() on to .html() , I didn't realize it actually replaces it.

$( "#results-section" ).append( "Your data from the last API call" );

Answer 1

You could use jQuery append.

$( "#results-section" ).append( "Your data from the last API call" );

Read more: https://api.jquery.com/append/