如何使用JavaScript修改HTML标签？

Question

我目前在开发一个网站，需要通过javascript动态添加内容。我正在使用UIKit (https://getuikit.com/docs/slider)。

这是我想要实现的：

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

我已经尝试过的方法：

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

那么我该如何在我的img html标签中添加uk-cover呢？ 谢谢！

- inxoy

---

尝试使用img.setAttribute（“ukcover”，“”） - Chris Li

你的评论中有一个拼写错误，img.setAttribute("uk-cover", "") 对我有效 - 发布你的答案，我会接受它。谢谢！ - inxoy

谢谢，我已经发布了我的答案。 - Chris Li

Answer 1

你可以使用Element.setAttribute()来设置指定元素上的属性值。如果该属性已经存在，则更新其值；否则，将添加一个具有指定名称和值的新属性。

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);

请注意：我已经设置了一些默认文本到alt属性中，因为仅具有视觉价值的图像应该在它们上面设置一个空的alt属性。

- Mamun

Answer 2

你可以使用setAttribute(propertyName, value)方法来实现此操作。

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

- michaelitoh

---

不起作用，因为它不是标签属性 - 而且它也不是 ukcover，而是 uk-cover。 - inxoy

Answer 3

点表示法不能用于带连字符的情况。请使用 Element.setAttribute。

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

- Adam Azad

Answer 4

您可以使用setAttribute()方法，将第二个参数传递为空字符串。

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);

- Fullstack Guy

Answer 5

要设置属性，您可以使用img.setAttribute("uk-cover", "")

- Chris Li