. Advertisement .
..3..
. Advertisement .
..4..
There are several ways to use JavaScript to show text in a browser. You can either directly write into the HTML document itself. Another option is making a separate dialog with your message on it.
Use JavaScript To Show Text In A Browser By Changing HTML
innerHTML
You can set the innerHTML of an HTML element to replace its content.
Example:
<div class="content" id="text">
<ul id="list">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
<div class="button">
<button id="trigger" type="button">Add a new product</button>
</div>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
list.innerHTML += `<li><a href="#">Product ${list.children.length + 1}</a></li>`;
}
</script>Result:
......... ADVERTISEMENT .........
..8..
Click the button, and a new item will be added to the list each time.
......... ADVERTISEMENT .........
..8..
Remember that this method comes with many security considerations. It can be used to execute any JavaScript code if you can’t control the inserted HTML.
You should use alternative options, such as the textContent and innerText below, to close that attack vector.
innerText
This property represents the text content of a whole HTML node, including its descendants. You can use it to set the text of an element
Example:
<div class="content" id="text1">
Click to try!
</div>
<div class="content button">
<button id="trigger" type="button">Click now</button>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
let text1 = document.getElementById('text1');
text1.innerText = 'Replaced text successfully with innerText!';
}
</script>Result:
......... ADVERTISEMENT .........
..8..
Click the button to see the change:
......... ADVERTISEMENT .........
..8..
You can append text with innerText as well, which is an easy task:
<div class="content" id="text2">
Use JavaScript To Show Text In A Browser.
</div>
<div class="content button">
<button id="trigger" type="button">Click here</button>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
let text2 = document.getElementById('text2');
text2.innerText += ' Successfully!';
}
</script>
Result:
......... ADVERTISEMENT .........
..8..
After the button is clicked, a new string will be added:
......... ADVERTISEMENT .........
..8..
textContent
Similar to innerText, the textContent property can also set the content of a node and all of its descendants.
Example:
<div class="content" id="text3">
Click to try!
<div class="button">
<button id="trigger" type="button">Click to replace</button>
</div>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
let text3 = document.getElementById('text3');
text3.textContent = 'Replaced text successfully with textContent!';
}
</script>Result:
......... ADVERTISEMENT .........
..8..
When you click the button, the whole node is replaced with the “‘Replaced text successfully with textContent”.
......... ADVERTISEMENT .........
..8..
document.write()
You can use the write() method to write some text content into an HTML document. It is a popular tool for testing JavaScript codes. Remember that this method deletes the whole content of the document before inserting the new content.
Example:
<div class="content" id="text4">
Click the button to try out!
</div>
<div class="content button">
<button id="trigger" type="button">Click now</button>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
const myWindow = window.open();
myWindow.document.write("<h1>New Window</h1>");
myWindow.document.write("<h2><Display text with the document.write()</h2>");
}
</script>When you click this button:
......... ADVERTISEMENT .........
..8..
A pop-up will open with the predefined message:
......... ADVERTISEMENT .........
..8..
Display Text Using JavaScript By With Pop-up Boxes
JavaScript provides three kinds of pop-up boxes, all of which can be used to display text.
alert()
This function is often used to notify the user of some important information.
Example:
<div class="content" id="text5">
Click on the button!
</div>
<div class="content button">
<button id="trigger" type="button">Click Here</button>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
alert("Use JavaScript To Show Text In A Browser");
}
</script>Result:
......... ADVERTISEMENT .........
..8..
A pop-up will appear when you click the button “Click Here”:
......... ADVERTISEMENT .........
..8..
confirm()
Use this function when you need the user to accept or verify something.
Example:
<div class="content" id="text6">
Click on button!
</div>
<div class="content button">
<button id="trigger" type="button">Click Now</button>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
if (confirm("Please, choose a button!")) {
txt = "You chose OK!";
} else {
txt = "You chose to Cancel!";
}
}
</script>Result:
......... ADVERTISEMENT .........
..8..
When you click the button “Click Now,” A dialog with two options will appear:
......... ADVERTISEMENT .........
..8..
prompt()
This is a simple solution for asking the user to input a value.
Example:
<div class="content" id="text7">
Click on button!
</div>
<div class="content button">
<button id="trigger" type="button">Click Now</button>
</div>
<script>
document.getElementById("trigger").addEventListener("click", write);
function write(){
let person = prompt("Please enter your Email address:", "");
}
</script>Result:
......... ADVERTISEMENT .........
..8..
When you click the button “Click Now, here is the prompt box:
......... ADVERTISEMENT .........
..8..
Conclusion
You should learn simple ways to use JavaScript to show text in a browser like the methods above before picking up a full-fledged front-end framework. They can’t produce fancy results. But these built-in solutions are efficient and get the job done.
Just share the suggestion here
With line 1: get the generated value and save it,
Line 2: create a text element on the document
Line 3: append the text element to the end of the body
4 ways to show text in the browser when using JavaScript
document.write()to add inside the<body>tagdocument.querySelector()to replace the content of a specific elementconsole.log()to add text output to the browser consolealert()to add text output to the popup boxExample