Loop in HTML Collections doesnt loop correctly

Question

im trying to loop through my HTML Collections as

const nodeItems = document.getElementsByClassName('image-inside')

I tried to loop like

for(let node of nodeItems) {
     console.log('im node ', node)                
     console.log('im node url' , node.src)
     return writer.createAttributeElement( 'img', {
            src: node.src,
            style: `width:${node.style.width};
                    height:${node.style.height};`,
                    class: 'image-inside'
     } , { priority: 7 } )
}

but only the first node were logged TWICE not the second one. Any thoughts guys? Any help would be very appreciated. Thanks for reading

UPDATE: So i have tried to convert to array. which is okay the logging is good. But the prototype of it is Array, what i should return is Nn ( due to writer.createAttributeElement() ). I dont even think i can achieve this

UPDATE2: So currently the array is loaded correctly now But when get the data from CKEditor5 through editor.getData() its still taking the last element

Still thank you guys so much for reading

Answer 1

You are breaking loop with return stmt.

See another answer https://stackoverflow.com/a/11714515/1205171

Answer 2

EDIT: Use EmptyElement since this is what you end up creating if you extend Element class

As mentioned in the comments you should remove the return statement.

Maybe convert it to an array first and remap the array like so:

let nodeItems = Array.from(document.getElementsByClassName('image-inside'));

nodeItems = nodeItems.map(function(node) {
     console.log('im node ', node)                
     console.log('im node url' , node.src)
     // Instead of creating your own element from Element (i.e. Nn), why not use Empty Element class instead. It will be what you create anyways I'm guessing
     return writer.createEmptyElement( 'img', {
            src: node.src,
            style: `width:${node.style.width};
                    height:${node.style.height};`,
                    class: 'image-inside'
     } , { priority: 7 } )
});