Jquery - appending a string from an array to a div

Hello, I am new to jquery and programmering. I want to add an span container in my html document’s div container. The div that I want to append to on my html document looks this:

.
<script type="text/javascript">

 var test        = ['A', 'B'];
 var counter = 0;

 $(document).ready(function(counter){
        $('#test').append('<span>' test[counter] '</span>');
        
      -if/else here?
       
}
});
</script>

here:

'<span>' test[counter] '</span>'

to join string and variables together you need to use +:

'<span>' +  test[counter] + '</span>'

where you should place your if/else depends on what it needs to do.

I need to check if I am at the end of my array, so if I am at 1 (‘B’), I would be at the end of the array, then reset the counter to 0, so I can loop my array, making the text change in the div, if that makes any sense… I am not the best at explaining, I’m sorry :confused:

I want to do fadeIn() and fadeOut() events on them as well later on… if that is important knowledge

why use a counter like you did? You can simple make a for loop:

result = "";
arrayLength = test.length;
for (var i = 0; i < arrayLength; i++){
    result += '<span>' + test[counter] + '</span>';
}
$("#test").append(result);
var example = ['A', 'B', 'C', 'D'];
        textSequence(0);

        function textSequence(i) {

            if (example.length > i) {
                setTimeout(function() {
                    document.getElementById("sequence").innerHTML = example[i];
                    textSequence(++i);
                }, 1000); // 1 second (in milliseconds)

            } else if (example.length == i) { // Loop
                textSequence(0);
            }

        }

I need to this, just with jquery, since I want it to do jquery events on them such as fadeIn/fadeOut and change between the strings in my array :confused:

how did we get from the code you posted first to this latest code?

Anything done in Jquery can be done in Javascript, Jquery is just makes DOM manipulation is a lot easier

Hmm, let me try to be more clear. The code above is in regular javascript, I know that it is just something I found, which does something close to what I want. The code loops through the array “var example = [‘A’, ‘B’, ‘C’, ‘D’];”. What I want to do is make use of jQuery, for making the them fadeIn and fadeOut as the div changes it’s content…

So that each letter fadeIn() then fadeOut() one at the time:thinking:

I want to make something similar to this https://www.pleo.io/da/ under the “Sig farvel til” text at the homepage

fadeIn and fadeOut already allow you to set the duration of the fade, what do you need of me? I already helped you further

don’t expect me to code the solution, if you have specific questions, ask them, i will do my best to answer them

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.