Как изменить HTML-тег с помощью JavaScript?

Question

В настоящее время я работаю над сайтом, на котором мне нужно динамически добавлять контент с помощью JavaScript. Я работаю с UIKit (https://getuikit.com/docs/slider).

Вот чего я хочу достичь:

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

Что я уже пробовал:

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

Так как мне добавить обложку uk к моему тегу img html? Спасибо!

Answer 1

для установки атрибута вы можете использовать img.setAttribute ("uk-cover", "")

Answer 2

Вы можете использовать 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.

Answer 3

Точечная запись не работает со случаями, имеющими дефис. Используйте Element.setAttribute

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

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

Answer 5

Вы можете сделать это методом setAttribute(propertyName, value).

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