SetAttribute on a specific position in Javascript

Question

I have the following iframe

<iframe frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip"></iframe>

When I target iframe through getElementsByTagName like this

let a = document.getElementsByTagName("iframe")[0];
a.setAttribute('allowfullscreen', '');

It returns:

<iframe frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip" allowfullscreen=""></iframe>

It's creating a problem for me because it is not working as expected. When I manually insert allowfullscreen at beginning it's working well.

This is the result I want instead

<iframe allowfullscreen="" frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip" ></iframe>

What am I doing wrong?

Answer 1

One simple way to add allowfullscreen="" just after the tag name is to modify the outerHTML of the element using string method split and array method splice as in the code below.

const miFrame = document.getElementsByTagName("iframe")[0];
console.log(miFrame);

// Split the outerHTML string into separate pieces
// by using a space as the separator
const miFrameOH = miFrame.outerHTML.split(' ');

// Using splice(position, deleteCount, itemToAdd),
// add attribute at index 1
miFrameOH.splice(1, 0, 'allowfullscreen=""');

// Join the parts (including the attribute) with a space separator and
// set this string to the outerHTML
miFrame.outerHTML = miFrameOH.join(' ');
console.log(document.getElementsByTagName("iframe")[0].outerHTML);

<iframe frameborder="0" src="//www.youtube.com/embed/adLvq2haaFg" class="note-video-clip"></iframe>