Carry out function after append

Question

Seems to be discussed a lot but can't find an easy answer. I want to ensure a function is carried out after I added a loader icon to the DOM but understand append doesn't support this. Are there any easy solutions?

Current code:

$('#tab').on('shown.bs.tab', function(e) {
    $("#htmlelement").append('<i class="fa fa-spinner fa-spin fa-fw"></i>');
    functionafterappend();
});

In the dupe above, there is an answer that uses `ready()` on the element which calls the append, I would give that a try first — Huangism, Oct 12 '17 at 16:38
@Huangism that's not what .ready() does. in this case it would simply push the request off to run on the next tick, which would be essentially identical to a 0 interval setTimeout. It isn't waiting for anything to be "ready", it just pushes it off to the callback queue because the dom IS ready. — Kevin B, Oct 12 '17 at 16:47

nikjohn · Accepted Answer · 2017-10-12T16:39:44.430

0

.append is a synchronous function. Therefore, this solution is valid and your functionafterappend() will execute only after append is executed.

For instance, look at the following example where I'm triggering an alert 3 secs after the append is done

$('div')
    .append(`<p>1. Append at ${console.log(new Date())}</p>`)
$('span')
    .append(`<span> 2. Another Append at ${console.log(new Date())}</span>`);
    
    // setTimeout(() => alert("Append has been completed"), 3000);

body {
  padding:50px;   
}

div {
  border:2px solid #bbb;
  background-color:#eee;
  padding:10px;
  margin:10px auto;
}

span {
  display:block;
  width:65px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:5px 10px;
  background-color:black;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet consectetur adipiscing elitr sed diam nonumy tempe goreng.</div>

It's the simplest way to do something after an append. Except of course, if you wanna chain functions like so:

.append('<span>1. Append</span>') .prepend('<span>1. Append</span>')

If you want to go completely functional, you can even do function composition like so using Lodash:

const newFunc = pipe(append, prepend);

edited Oct 12 '17 at 16:39

answered Oct 12 '17 at 12:50

nikjohn

20,026
14
50
86

Seems like the only one that worked for me. Feels like a hack solution but ok. Thanks! – Kevin Lindmark Oct 12 '17 at 15:07
Nothing hacky about it. It's the simplest way to do something after an `append`. Except of course, if you wanna chain functions like so: `.append('1. Append') .prepend('1. Append')` And so on. If you want to go completely functional, you can even do function composition like so using Lodash: const newFunc = pipe(append, prepend); Adding this to the answer as well – nikjohn Oct 12 '17 at 16:22
It is hacky, you are waiting 3 seconds to do something, what if I don't want to wait 3 seconds? What if I want to execute as soon as the appended element is ready? – Huangism Oct 12 '17 at 16:31
Oh I should have clarified. The 3 second wait was not in order to wait for the append to finish. That was in order to clearly show that the functional is called after 3 seconds. You can change it to 0 seconds, or even remove the timeout altogether and it will still function the same. I have updated the answer to reflect this – nikjohn Oct 12 '17 at 16:39
In other words, the OP's current code already works lol – Huangism Oct 12 '17 at 16:49
Yup. That's literally what the first two sentences in my answer says :) – nikjohn Oct 12 '17 at 16:52

Carry out function after append

1 Answers1