jQuery addClass example

Change class name on click in jQuery

by grant

HTML

<div id="gray">
  javascript var -- display stuff
 
 <br>jquery .results<div class="results"></div>
  <div id="para"></div>
 <div id="demo"></div>
 <div id="msg"></div>
 
</div>

CSS

body {
  background: #ffffff;
  padding: 5px;
  font-family: Helvetica;
}

#gray {
  background: gray;
  border-radius: 4px;
  padding: 15px;
  font-size: 1em;
  text-align: center;
  transition: all 0.2s;
  margin: 5px auto;
  width: 85%;
}

.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
  margin: 5px auto;
  width: 85%;
}

JavaScript

// 'Modern' browsers (IE8+, use CSS-style selectors)
const mine = ("mine");
const yours = ("yours");
// plain old js
document.querySelector('.results').innerHTML = yours;

// Using the jQuery library
$('.results').html(mine);

// creates a div w/ out ref in html
let div = document.createElement('div');
  div.className = "alert alert-success";
  div.innerHTML = "<strong>Hi there!</strong> This creates its own div!";
document.body.appendChild(div);

//$(document.body).append(msg());
function msg(msgg){
    var msg= msgg
    return msg;
}
// just put a var in innerhtml
var hex = "hex";
function myFunction(p1, p2) {
  return p1 * p2;
}
document.getElementById("msg").innerHTML = msg("msg")
document.getElementById("para").innerHTML = myFunction(2,2)
document.getElementById("demo").innerHTML = hex