How to output HTML '<div>' element with Javascript

Question

I want a user to be able to enter specific values into an input field and would like to be able to output the values WITH HTML "markup" such as '< div >' and '< p >' as text only. I have tried outputting it as a string as well but i cannot figure it out. Please help!

I would like it to operate like this:

Input value = x Output = x

does it have to be output as a string so the browser doesnt only output = x? All insight helps!

Please See My Example Here:

<html>
<head>
  <title>Markup Generator</title>
</head>
<body>
 
First name: <input id="first_name">
Last name: <input id="last_name">
<button id="say">Say hi!</button>
 
<hr>
<div id="result"></div>
 
<script>
function say_hi() {
    var fname = document.getElementById('first_name').value;
    var lname = document.getElementById('last_name').value;
 
    var html = 'Hello <b>' + fname + '</b> ' + lname;
 
    document.getElementById('result').innerHTML = html;
}
 
document.getElementById('say').addEventListener('click', say_hi);
</script>

just replace innerHTML to innerText.

Bhavin Shah
– Bhavin Shah

2019-01-06 05:30:46 +00:00
Commented Jan 6, 2019 at 5:30 — Bhavin Shah
– Bhavin Shah, Commented Jan 6, 2019 at 5:30

M. Duisenbayev · Accepted Answer · 2019-01-06 05:28:08Z

2

<html>
<head>
  <title>Markup Generator</title>
</head>
<body>
 
First name: <input id="first_name">
Last name: <input id="last_name">
<button id="say">Say hi!</button>
 
<hr>
<div id="result"></div>
 
<script>
function say_hi() {
    var fname = document.getElementById('first_name').value;
    var lname = document.getElementById('last_name').value;
 
    var html = 'Hello <b>' + fname + '</b> ' + lname;
 
    document.getElementById('result').innerText = html;
}
 
document.getElementById('say').addEventListener('click', say_hi);
</script>

answered Jan 6, 2019 at 5:28

M. Duisenbayev

3181 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2647510 Over a year ago

perfect! thats exactly what i needed. youre the best!

Maheer Ali · Accepted Answer · 2019-01-06 05:32:36Z

0

You can use innerText instead of innerHTML like this

document.getElementById('result').innerText = html;

answered Jan 6, 2019 at 5:32

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Collectives™ on Stack Overflow

How to output HTML '<div>' element with Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related