JSFiddle - React, Tailwind, and code Playground

by radiotrib

HTML

<div blah='blahblah' name='fred' style='border: solid 1px red'>
    blah blah<br />
    <button>Click me but nothing will happen</button>
    <br />
</div>

JavaScript

// this is just to grab the first div and the first button

//===== SET the ID Attribute of any DOM object =============
var div  = document.getElementsByTagName('div')[0];
div.id = 'firstDiv';
document.getElementById('firstDiv').innerHTML = document.getElementById('firstDiv').innerHTML + '<br />EXTRA BLahs';

// attributes can be added directly if they are RECOGNISED DOM ATTRIBUTES
// ===== SET the NAME attribute of a button ===============
var butt = document.getElementsByTagName('button')[0];
butt.name = 'nonButton';
console.debug(document.getElementsByName('nonButton'));
document.getElementsByName('nonButton')[0].innerHTML = 'Something Happened';

// setAttribute is required if you wish to insert a custom attribute
// e.g. adding a 'name' attribute to a div. Name is only a recognised
// DOM attribute for certain DOM objects.
// ==== FAIL to SET the nme attributr of a div ============
var div  = document.getElementsByTagName('div')[0];
div.name = 'this_is_a_property';
alert(document.getElementsByName('this_is_a_property')[0]);