Application Display Tools with JavaScript

app_display_tools.js

// JavaScript Techniques for Selectors

var something = document.getElementById("the-id-name");
var something = document.getElementsByTagName("p");
var something = document.getElementsByClassName("class-name");
var something = document.querySelector("#id-name");
var something = document.querySelector(".class-name");
var something = document.querySelector("element");
var something = document.querySelectorAll("p.intro");

// JavaScript Techniques for DOM Manipulation

something.innerHTML = "Adding something";

var unorderedList = document.getElementsByTagName("ul");
var listItem = document.createElement("li");
listItem.innerHTML = "something";
unorderedList.appendChild(listItem);

// jQuery techniques for Selectors

$("body") // tag
$(".class-name") // element(s) with class 
$("#id-name") // element with id
$("#id-name .class-name") // elements(s) with class and child of id element

// jQuery Techniques for DOM Manipulation

$(".class-name").html() // Get or set the HTML contents.
$(".class-name").text() // Get or set the text contents; HTML will be stripped.
$(".class-name").attr() // Get or set the value of the provided attribute.
$(".class-name").width() // Get or set the width in pixels of the first element in the selection as an integer.
$(".class-name").height() // Get or set the height in pixels of the first element in the selection as an integer.
$(".class-name").position() // Get an object with position information for the first element in the selection, relative to its first positioned ancestor. This is a getter only.
$(".class-name").val() // Get or set the value of form elements.