Recommand · October 22, 2021 0

Equivalent of document.createElement in jquery

This question already has answers here:

jQuery document.createElement equivalent?

(14 answers)

Closed 1 hour ago.

I am working with web components. What is the equivalent of the following code in jquery?

const horizontalMasonry = document.createElement('test-horizontal-masonry');
horizontalMasonry.items = [
    {
        id: `0`,
        url: "https://homepages.cae.wisc.edu/~ece533/images/watch.png",
        isPremium: false,
        alt: 'Thumbnail'
    },
    {
        id: `1`,
        url: "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
        isPremium: true,
        alt: 'Thumbnail'
    },
    {
        id: `2`,
        url: "https://homepages.cae.wisc.edu/~ece533/images/cat.png",
        isPremium: true,
        alt: 'Thumbnail'
    }
];

horizontalMasonry.addEventListener('THUMBNAIL_CLICK_EVENT', () => {
    // e.detail.item
});

document.body.appendChild(horizontalMasonry);

I tried

        $masonry = $('<theo-horizontal-masonry rows="1"></theo-horizontal-masonry>');
        $masonry.items = items;
        $masonry.width = 256;
        $masonry.height = 100;
        $carousel.append($masonry);

but the element is not retaining the properties items, width, height.

You are setting things to the jQuery object, not the element itself. You should be using attr() or prop() to change the DOM element.

$masonry.attr('items', items);
// or
$masonry.prop('items', items);