Hur man lägger till/uppdaterar ett attribut till ett HTML-element med JavaScript?

Jag försöker hitta ett sätt som kommer att lägga till/uppdatera attribut med JavaScript. Jag vet att jag kan göra det med setAttribute()-funktionen, men det fungerar inte i IE.

Svar #1

Du kan läsa här om beteendet hos attribut i många olika webbläsare, inklusive IE.

element.setAttribute() borde fungera, även i IE. Har du provat det? Om det inte fungerar kanske element.attributeName='value' kan fungera.

Svar #2

Det som verkar enkelt är faktiskt knepigt om du vill vara helt kompatibel.

var e = document.createElement('div');

Säg att du har ett id på 'div1' att lägga till.

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

Alla dessa kommer att fungera förutom den sista i IE 5.5 (som vid det här laget är antik historia men fortfarande är XPs standard utan uppdateringar).

Men det finns naturligtvis förbehåll. Fungerar inte i IE före 8:e.attributes['style'] kommer inte att ge ett fel men kommer faktiskt inte att ställa in klassen, det måste vara className:e['class'].
Däremot, om du använder attribut kommer detta ATT fungera:e.attributes['class']

Sammanfattningsvis, tänk på attribut som bokstavliga och objektorienterade.

I bokstavlig bemärkelse vill du bara att det ska skriva ut x='y' och inte tänka på det. Det här är vad attribut, setAttribute, createAttribute är till för (förutom för IEs stil-undantag). Men eftersom detta verkligen är objekt kan saker bli förvirrande.

Eftersom du tar dig besväret att korrekt skapa ett DOM-element istället för jQuery innerHTML-slarv, skulle jag behandla det som ett och hålla mig till e.className='fooClass' och e.id='fooID'. Detta är en designpreferens, men i det här fallet fungerar det mot dig att försöka behandla det som något annat än ett objekt.

Det kommer aldrig slå tillbaka på dig som de andra metoderna kan göra, var bara medveten om att class är className och style är ett objekt, så det är style.width och inte style="width:50px". Kom också ihåg tagName men detta är redan satt av createElement så du borde inte behöva oroa dig för det.

Det här blev längre än jag ville, men CSS-manipulering i JS är knepigt.

Svar #3

Obligatorisk jQuery-lösning. Hittar och sätter title-attributet till foo. Observera att detta väljer ett enskilt element eftersom jag gör det med id, men du kan enkelt sätta samma attribut på en samling genom att ändra selektorn.

$('#element').attr( 'title', 'foo' );