how to get the dynamic html element id value using HtmlCollections or Nodelist

i was making the dynamic element by using innerhtml, but i did not get the element id dynamically.

var videoWrap = document.getElementsByClassName('videoWrap');
   console.log(videoWrap)

//console value

HTMLCollection(1)
0: div#cardvideo_localstream.p-1.position-relative.videowrap
cardvideo_localstream: div#cardvideo_localstream.p-1.position-relative.videowrap
length: 1
[[Prototype]]: HTMLCollection
item: ƒ item()
length: (...)
namedItem: ƒ namedItem()
constructor: ƒ HTMLCollection()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.toStringTag): "HTMLCollection"
get length: ƒ length()
[[Prototype]]: Object

i want to get the id value -> #cardvideo_localstream

Answer

There are two ways:

• You can get dynamic id by retrieving tag-name or class-name as you prefer. But the structure should be fixed. You need to parse result of output(e.g property value) and get id wherever is located.

• In another way the output you give you can simply trim the string and get id.

But in both case the format/structure should be fix otherwise it’ll break.