Question

Is it possible to query the length of an array and then use JS/jQuery to create the same amount of new HTML elements client side?

The code I have for the array is:

var psC1 = [
'item1',
'item2',
'item3'
];

alert(psC1.length);

Which will alert that there’s 3 items in the array. I now want to create three iframes on the page, and index the array into the src attribute of each element.

The code I’d use to insert the src of the iframes using the array would be:

  $('.test-iframe').each(function() {
    $(this).attr('src', psC1[$(this).index()]); 
   });

What I’m struggling with is after counting the array, is creating three iframes with JS/jQuery.

Answer 1

To create an iframe with jQuery, you use the $ function (or jQuery in no-conflict mode):

$("<iframe>").appendTo(document.body);

Of course, you don’t have to append to body, you can put the iframe wherever you need it.

In your case, perhaps something like this:

$.each(psC1, function(index, value) {
    $("<iframe>").attr("src", value).appendTo(document.body);
});

$.each loops through the array entries.