DEV Community

Cover image for Manipulating Elements
_Khojiakbar_
_Khojiakbar_

Posted on

Manipulating Elements

Changing Content

  • innerHTML: Gets or sets the HTML content inside an element.
element.innerHTML = '<p>New Content</p>';
Enter fullscreen mode Exit fullscreen mode
  • textContent: Gets or sets the text content of an element.
element.textContent = 'New Text';
Enter fullscreen mode Exit fullscreen mode
  • innerText: Similar to textContent but takes into account CSS styling.
element.innerText = 'New Text';
Enter fullscreen mode Exit fullscreen mode

Changing Attributes

  • getAttribute(): Gets the value of an attribute on the specified element.
const value = element.getAttribute('src');
Enter fullscreen mode Exit fullscreen mode
  • setAttribute(): Sets the value of an attribute on the specified element.
element.setAttribute('src', 'newImage.jpg');
Enter fullscreen mode Exit fullscreen mode
  • removeAttribute(): Removes an attribute from the specified element.
element.removeAttribute('src');
Enter fullscreen mode Exit fullscreen mode

Changing Styles

  • Using the style Property: Directly manipulate an element's inline styles.
element.style.color = 'red';
element.style.fontSize = '20px';
Enter fullscreen mode Exit fullscreen mode
  • Using classList Methods:

  • add: Adds a class to an element.

element.classList.add('newClass');
Enter fullscreen mode Exit fullscreen mode
  • remove: Removes a class from an element.
element.classList.remove('oldClass');
Enter fullscreen mode Exit fullscreen mode
  • toggle: Toggles a class on an element.
element.classList.toggle('activeClass');
Enter fullscreen mode Exit fullscreen mode
  • contains: Checks if an element contains a specific class.
element.classList.contains('someClass');
Enter fullscreen mode Exit fullscreen mode

Creating and Inserting Elements

  • createElement(): Creates a new element.
const newElement = document.createElement('div');
Enter fullscreen mode Exit fullscreen mode
  • appendChild(): Appends a child element to a parent element.
parentElement.appendChild(newElement);
Enter fullscreen mode Exit fullscreen mode
  • insertBefore(): Inserts an element before a specified child of a parent element.
parentElement.insertBefore(newElement, referenceElement);
Enter fullscreen mode Exit fullscreen mode
  • insertAdjacentHTML(): Inserts HTML text into a specified position.
element.insertAdjacentHTML('beforebegin', '<p>Before</p>');
element.insertAdjacentHTML('afterbegin', '<p>Start</p>');
element.insertAdjacentHTML('beforeend', '<p>End</p>');
element.insertAdjacentHTML('afterend', '<p>After</p>');
Enter fullscreen mode Exit fullscreen mode
  • append() and prepend(): Inserts nodes or text at the end or beginning of an element.
parentElement.append(newElement, 'Some text');
parentElement.prepend(newElement, 'Some text');
Enter fullscreen mode Exit fullscreen mode

Removing Elements

  • removeChild(): Removes a child element from a parent element.
parentElement.removeChild(childElement);
Enter fullscreen mode Exit fullscreen mode
  • remove(): Removes the specified element from the DOM.
element.remove();
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay