DONATE  
MENU
JSON
AJAX
MYSQL
JAVASCRIPT
HTML
CSS
PHP

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Html / Js Dom » Get And Change Elements' Contents & Values
Share Tweet WhatsApp

Get And Change Elements' Contents & Values

In the JavaScript/HTML document object exists various properties for each element's object that contains the content or value of those HTML element if any. In this page, we shall get familiarized with the various properties that elements' objects possess and that can be used in accessing or changing their contents or values. NOTE:
  1. Properties used in getting the contents or values of HTML elements belong to the individual elements' objects. We must then access an element's object using the previous method before getting or changing contents/values
  2. Getting values applies to only form elements e.g inputs elements. An element created the <p> tag for example cannot have a value.
  3. The property used in getting an element's content or value can also be used in changing such contents or values.
innerText The elements' innerText property enables us to get the text content of HTML elements. In this case, if such elements contain other HTML elements, their tags are stripped off and their text content only returned. EXAMPLE
<p id='myp'>I am learning JavaScript at <b><a>stackbeginner.com</a></b>. So far, the experience have been worth it. <br/>Thanks to the ADMIN</p>

<button onclick='getText()'>GET TEXT</button>

<script>
function getText(){
var txt = document.querySelector("#myp").innerText;

alert(txt);
}
</script>

Copy PRACTICE IT

Hope you notice how the tags(<b><a><br/>) inside the paragraph element were stripped off while returning only the text contents. So, use the innerText property if you want the text content of an HTML element only. CHANGING HTML ELEMENTS' TEXT The innerText can also change elements' text content. In the case, any HTML tag that accompanies such new text won't be interpreted as HTML elements but rather plain text.
<p>My First Text</p>

<button id='btn'>CHANGE TEXT</button>

<script>
document.getElementById("btn").addEventListener("click", change);
function change(){
var myp = document.getElementsByTagName("p");

myp[0].innerText = "My New Text. Sorry but HTML tags <b>Hello</b> won't be interpreted because this is plain texts.";
}
</script>

Copy PRACTICE IT

Therefore, use the innerText property to change an element content if you want the HTML tags contained in the new content not to be interpreted. innerHTML The innerHTML property is similar to the innerText property but then, the difference is the innerHTML property returns both the HTML tags and texts contained in an element. EXAMPLE
<p id='myp'>I am learning JavaScript at <b><a>stackbeginner.com</a></b>. So far, the experience have been worth it. <br/>Thanks to the ADMIN</p>

<button onclick='getHTML()'>GET HTML</button>

<script>
function getHTML(){
var html = document.querySelector("#myp").innerHTML;

alert(html);
}
</script>

Copy PRACTICE IT

CHANGING HTML ELEMENTS' TEXT AND HTML The innerHTML property can be used in changing an elements' texts and HTML contents. In this case, whatever HTML element accompanies the new content will be fully interpreted.
<p><b>My First HTML</b></p>

<button id='btn'>CHANGE HTML</button>

<script>
document.getElementById("btn").addEventListener("click", change);
function change(){
var myp = document.getElementsByTagName("p");

myp[0].innerHTML = "My New HTML. <b>Hello</b> and <del>deleted</del> will be interpreted.";
}
</script>

Copy PRACTICE IT

value The value property gets or changes the value of an HTML form element. You can use it to get and change the values of all inputs, selects, textareas. EXAMPLE
<div><p><b>Username:</b></p>
<input type='text' id='username' placeholder='Enter username'/></div>

<p><button onclick='submit()'>SUBMIT</button></p>

<script>
function submit(){
var username = document.getElementById("username").value;
alert("Your username is "+username);
}
</script>

Copy PRACTICE IT

CHANGE FORM VALUES The value property also enables us to change values of form elements.
<input type='text' id='username' placeholder='Enter username'/></div>

<p><button onclick='suggest()'>SUGGEST</button><button onclick='clearEl()'>CLEAR</button></p>

<script>
function suggest(){
var usernameElement = document.getElementById("username");

usernameElement.value = "DatJS_Guy"; //changing elements
}

function clearEl(){
var usernameElement = document.getElementById("username");

usernameElement.value = ""; //Changing element to nothing
}
</script>

Copy PRACTICE IT

SUMMARY
  1. Every element's object in the document object have properties that contains their content or value if such elements are not empty elements.
  2. One of such is the innerText property that contains all the text content of an element. We can also use it to change such contents without the webpage reloading.
  3. Another is the innerHTML property that contains both text and HTML content of an element.
  4. Yet again, we have the value property that contains the value of form elements.
Take a short quiz on Get And Change Elements' Contents & Values.
Ask a question or tell us if Get And Change Elements' Contents & Values is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode