Append a load() output to the same div in jQuery

Question

A button calls a JS function that loads a different PHP page asynchronously using jQuery load, and it will put the result in a errorReturn div.

<div id='errorReturn'></div>
<button onclick='trySomething()'>Click me</button>

<script>
function trySomething() {
  var url = 'otherpage.php'
  $('#errorReturn').load(url)
}
</script>

All is fine.
Since I want the user to see ALL the errors if the button is clicked multiple times, I wanted to APPEND that result to the same div.
I tried both

$('#errorReturn').append.load(url)
$('#errorReturn').append(load(url))

And they didn't work. Then I found the solution:

$('#errorReturn').append($('#errorReturn').load(url))

It works. Kind of :( It fills the errorReturn div, but it doesn't append to it. It simply overwrites it, as if I simply wrote

$('#errorReturn').load(url)

I should probably just take a break, but I cannot see what's wrong :(

EDIT: Since somebody flagged this as "answered in another question", the other question was using JS while I was explicitly asking for jQuery - plus the other answer generated a lot of fuss about adding HTML with possible XSS injection and I think the accepted answer here is way nicer and simpler to understand

Does this answer your question? [How to append data to div using JavaScript?](https://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript) — Chaz, Sep 08 '20 at 14:17

score 2 · Answer 1 · answered Sep 08 '20 at 14:17

2

Make a new <div>, .load() content into it, and .append() that.

$("#errorReturn").append($("<div/>").load(url));

You can of course also add styles etc. to the <div>, like for example a top margin to separate the individual errors.

answered Sep 08 '20 at 14:17

Pointy

405,095
59
585
614

1

This works too, thank you, but I prefer the @Rory answer because it doesn't require another div, but as you said, if I want to separate the different results, I could use this. Fact is, my return ALREADY gives me a nice div with a "x" to close it, so... I do not need it, but thanks again – ZioBit Sep 08 '20 at 14:32

score 2 · Accepted Answer · answered Sep 08 '20 at 14:18

2

load() always overwrites the content of the target element. To do what you require you could make the AJAX request and append the content manually. Try this:

<div id="errorReturn"></div>
<button id="add-content">Click me</button>

jQuery($ => {
  $('#add-content').on('click', e => {
    $.ajax({
       url: 'otherpage.php',
       success: html => $('#errorReturn').append(html)
    });
  });
});

answered Sep 08 '20 at 14:18

Rory McCrossan

331,213
40
305
339

Ok wow, fancy syntax :) It took me a while to understand it :) My button is dynamically generated in another page so I do not have access to its id to append the click event. But I used the "basic" $.ajax to do as you suggested and it worked perfectly :) I will accept the answer as soon as I can. Thank you – ZioBit Sep 08 '20 at 14:29
No problem, glad to help. `My button is dynamically generated in another page so I do not have access to its id to append the click event` in this case use a delegated event handler: `$(document).on('click', '#add-content', e => { ...`. Never use inline `onclick` attributes, they are outdated and not good practice. – Rory McCrossan Sep 08 '20 at 14:32
Thanks for the tip. In general, I am also trying NOT to use jQuery because with the latest versions of JS, jQuery is kind of redundant, right? But yes, this is not my main field of software knowledge so I am outdated too for sure :) – ZioBit Sep 08 '20 at 14:35
1

That depends on what you're using it for. There's a lot of handy features that jQuery has which are a pain in native JS. Even if you don't want to use jQuery, avoiding `onX` attributes is still the best practice. Research `addEventListener()` for the native alternative. – Rory McCrossan Sep 08 '20 at 14:35

Append a load() output to the same div in jQuery

2 Answers2