How to modify html tag with javascript?

Question

I am currently working on a website where I need to add content dynamically via javascript. I am working with UIKit (https://getuikit.com/docs/slider).

This is what I want to achieve:

<img src="images/photo.jpg" alt="" uk-cover>

What I Already tried:

img = document.createElement("img");
img.ukcover = "";

So how do I add the uk-cover to my img html tag? Thanks!

• Chris Li: try img.setAttribute("ukcover", "")
• inxoy: u have a typo in your comment img.setAttribute("uk-cover", "") worksfor me - post your answer and I'll accept it. Thanks!
• Chris Li: thanks i posted my answer

Answer 1

You can use Element.setAttribute() that

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

let img = document.createElement("img");
img.setAttribute('src', 'images/photo.jpg');
img.setAttribute('alt', 'photo');
img.setAttribute('uk-cover', '');
document.body.appendChild(img)
console.log(img);

Please Note: I have set some default text to alt attribute because images with only visual value should have an empty alt attribute set on them.

Answer 2

to set attribute you can use img.setAttribute("uk-cover", "")

Answer 3

Dot notation does not work with cases having a hyphen. Use Element.setAttribute

const img = document.createElement("img");
img.setAttribute('uk-cover', "https://picsum.photos/300");

Answer 4

You can do this with setAttribute(propertyName, value) method.

img = document.createElement("img");
img.setAttribute("ukcover", "");
img.setAttribute("src", "images/photo.jpg");
img.setAttribute("alt", "");

• inxoy: doesn't work, because its not a tag property - and its also uk-cover not ukcover

Answer 5

You can use setAttribute() and pass the second argument as a blank string.

img = document.createElement("img");
img.setAttribute('uk-cover','');
img.src = "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
document.body.appendChild(img);