Advertisement
Google Ad Slot: content-top
JS Modify Content Dom
In JavaScript, modifying content in the DOM allows you to dynamically change the text, HTML structure, or even remove content in a webpage. Below are the common methods to manipulate content in the DOM:
textContent:
- Updates or retrieves the text inside an element.
- Strips any HTML tags and treats everything as plain text.
Example
<div id="example">Existing text</div>
<script>
const element = document.getElementById('example');
element.textContent = 'This is updated text!';
console.log(element.textContent); // Output: This is updated text!
</script>
innerHTML:
- Sets or retrieves the HTML content inside an element.
- Allows you to insert HTML tags as well.
Example
<div id="example">Existing text</div>
<script>
const element = document.getElementById('example');
element.innerHTML = '<strong>Bold Text</strong>';
console.log(element.innerHTML); // Output: <strong>Bold Text</strong>
</script>
outerHTML:
- Sets or retrieves the HTML of the element itself, including the element tag.
Example
<div id="example">Existing text</div>
<script>
const element = document.getElementById('example');
console.log(element.outerHTML); // Outputs the entire element, e.g., <div id="example">...</div>
element.outerHTML = '<p>Replaced element!</p>'; // Replaces the entire element.
</script>
value:
- Get value from input element
Example
<h1>value in js</h1>
<input id="example" type="text" value="whereisstuff" />
<p>Open console in browser then you will see output</p>
<div id="bindInput"></div>
<script>
const element = document.getElementById('example');
console.log(element.value); // Outputs whereisstuff
const bindInput = document.getElementById('bindInput');
bindInput.innerHTML = element.value;
</script>