10 TIPs - To Become a Good Developer/Programmer
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
TECHNOLOGIES
ANSWERS
LEARN
NEWS
BLOGS
VIDEOS
INTERVIEW PREP
BOOKS
EVENTS
Training
Live
JOBS
MORE
CAREER
MEMBERS
Updating Text in JavaScript
Abhijeet Singh
Updated date
Apr 22, 2020
19.4k
0
2
In this article we will see how to update text in JavaScript.
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
Print
Other Artcile
Expand
js.rar
1. On the basis of User, Input update the text
We can change text depending on the input from the user.
By adding a Text Input, we can update our text with whatever the user types into the text input.
<html>
<head>
Hello
</head>
<body>
<script type=
"text/javascript"
>
function
doChange() {
var
myInput = document.getElementById(
'myInput'
).value;
document.getElementById(
'abhijeet'
).innerHTML = myInput;
}
</script>
<p>
Welcome to my site <b id=
'abhijeet'
></b>
</p>
<input type=
'text'
id=
'myInput'
value=
'Enter Text Here'
/>
<input type=
'button'
onclick=
'doChange()'
value=
'Change Text'
/>
</body>
</html>
Output
2. Using InnerHtml to update text
The innerHTML property is used with getElementById within the JavaScript code to refer to an HTML element and change its contents.
<html>
<head>
Hello
</head>
<body>
<script type=
"text/javascript"
>
function
doChange() {
document.getElementById(
'abhi'
).innerHTML =
'Abhijeet'
;
}
function
doChange2() {
document.getElementById(
'abhi'
).innerHTML =
'Honey'
;
}
</script>
<p>
Welcome to my site <b id=
'abhi'
>guyzz</b>
</p>
<input type=
'button'
onclick=
'doChange()'
value=
'Change Text'
/>
<input type=
'button'
onclick=
'doChange2()'
value=
'Again Change Text'
/>
</body>
</html>
Output
innerHTML property
JavaScript
JavaScript Updating Text
updating text with InnerHtml
Next Recommended Reading
FEATURED ARTICLES
View All
TRENDING UP
01
Azure Duration Functions - How To Use And Implement It
02
Creating Search Feature In Blazor Server Grid
03
Log Correlation In Microservices
04
Create A PowerApps Component Framework (PCFx ) Using Custom Code In PowerAPPs
05
Import PowerApps Component Framework (PCFx ) Into Model Driven PowerApps
06
How To Handle Nullable Reference In .NET 6
07
Creating Various Layouts For Different Razor Pages In Blazor
08
Growth Mindset Show Ep. 11 - 2022
09
Safest Way To Convert String To Int In C#
10
Top Three VS Code Extensions Worth The Money
View All
Learn JavaScript
Challenge yourself
Blockchain Basics Skill
Get Certified
HTML5 Developer