A "cheat sheet" of JavaScript methods useful for hacky content edits.
My 90% Use Case: Modifying Content
I don't always use JavaScript. But when I do, it's usually to change website content I can't reach in the CMS. I almost always use a combination of querySelector and innerHTML to do something like this:
<script defer>
document.querySelector('.class #ID').innerHTML = 'Replacement content here';
</script>When that doesn't cut it, these other JavaScript methods probably will:
Selecting Elements
- By ID:
document.getElementById('elementId') - By Class:
document.getElementsByClassName('className') - By Tag Name:
document.getElementsByTagName('tagName') - Query Selector:
document.querySelector('.class #id')
Selecting Elements Within an Iframe
- Manipulate Embedded Content:
document.getElementById('iframeId').contentWindow.document
Changing Content
- Changing Text:
element.innerText = 'New Text' - Alternative for Changing Text:
element.textContent = 'New Text' - Changing HTML:
element.innerHTML = '<b>New HTML Content</b>'
Changing Styles
- Changing a Style:
element.style.color = 'red' - Adding a CSS Class:
element.classList.add('className') - Removing a CSS Class:
element.classList.remove('className')
Modifying Attributes
- Setting an Attribute:
element.setAttribute('src', 'newImage.jpg') - Removing an Attribute:
element.removeAttribute('disabled') - Getting an Attribute:
element.getAttribute('src')
Adding and Removing Elements
- Creating an Element:
document.createElement('div') - Appending an Element:
parentElement.appendChild(newElement) - Removing an Element:
parentElement.removeChild(elementToRemove) - Replacing an Element:
parentElement.replaceChild(newElement, oldElement)
Event Handling
- Adding an Event Listener:
element.addEventListener('eventType', function)
