Styjun

How can one write good dialogue in a story without sounding wooden?

Is anyone advocating the promotion of homosexuality in UK schools?

Referring to different instances of the same character in time travel

Matchmaker, Matchmaker, make me a match

Cops: The Hidden OEIS Substring

What explains 9 speed cassettes price differences?

How can I calculate the sum of 2 random dice out of a 3d6 pool in AnyDice?

How to properly say "bail on somebody" in German?

What is this triple-transistor arrangement called?

How to tell someone I'd like to become friends without letting them think I'm romantically interested in them?

Using Newton's shell theorem to accelerate a spaceship

Did the Vulgar Latin verb "toccare" exist?

Should disabled buttons give feedback when clicked?

Why are all my yellow 2V/20mA LEDs burning out with 330k Ohm resistor?

If your plane is out-of-control, why does military training instruct releasing the joystick to neutralize controls?

How do you glue a text to a point?

Combining latex input and sed

C program to parse source code of another language

Are there any sports for which the world's best player is female?

Ownership of a PhD Student's Research

Machine learning and operations research projects

How would vampires avoid contracting diseases?

What was the definition of "set" that resulted in Russell's Paradox

Are randomly-generated passwords starting with "a" less secure?

How to insert HTML into getDocumentByID.innerHTML function

How do JavaScript closures work?How to horizontally center a <div>?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?var functionName = function() vs function functionName() How do I redirect to another webpage?How to insert an item into an array at a specific index (JavaScript)?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?Why does HTML think “chucknorris” is a color?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I am writing a function to insert a clock countdown that outputs the hour and minutes until something happens. However, I want to customize the HTML of the hour and minutes variables to appear within tags. So far this is what I have:

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = hours + "hrs"
+ minutes + "min";

I'm not sure how to add an HTML tag around the hours and minutes elements. Essentially I want it to output as

<span>12hrs</span>
<span>50min</span>

I have the variable time math working but just need to get some html span classes in there.

Thanks for any guidance you can provide.

javascript html innerhtml

share|improve this question

asked Mar 26 at 2:26

wonder_dev22wonder_dev22

2611 silver badge66 bronze badges

add a comment | 

1

I am writing a function to insert a clock countdown that outputs the hour and minutes until something happens. However, I want to customize the HTML of the hour and minutes variables to appear within tags. So far this is what I have:

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = hours + "hrs"
+ minutes + "min";

I'm not sure how to add an HTML tag around the hours and minutes elements. Essentially I want it to output as

<span>12hrs</span>
<span>50min</span>

I have the variable time math working but just need to get some html span classes in there.

Thanks for any guidance you can provide.

javascript html innerhtml

share|improve this question

asked Mar 26 at 2:26

wonder_dev22wonder_dev22

2611 silver badge66 bronze badges

add a comment | 

I am writing a function to insert a clock countdown that outputs the hour and minutes until something happens. However, I want to customize the HTML of the hour and minutes variables to appear within tags. So far this is what I have:

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = hours + "hrs"
+ minutes + "min";

I'm not sure how to add an HTML tag around the hours and minutes elements. Essentially I want it to output as

<span>12hrs</span>
<span>50min</span>

I have the variable time math working but just need to get some html span classes in there.

Thanks for any guidance you can provide.

javascript html innerhtml

share|improve this question

asked Mar 26 at 2:26

wonder_dev22wonder_dev22

2611 silver badge66 bronze badges

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = hours + "hrs"
+ minutes + "min";

<span>12hrs</span>
<span>50min</span>

share|improve this question

asked Mar 26 at 2:26

wonder_dev22wonder_dev22

2611 silver badge66 bronze badges

share|improve this question

asked Mar 26 at 2:26

wonder_dev22wonder_dev22

2611 silver badge66 bronze badges

asked Mar 26 at 2:26

wonder_dev22wonder_dev22

2611 silver badge66 bronze badges

asked Mar 26 at 2:26

wonder_dev22wonder_dev22

2611 silver badge66 bronze badges

3 Answers
3

active

oldest

votes

5

You can just normally add the strings

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

<div id="test"></div>

Or in these case make use of Template Strings which allows you to interpolate expressions inside string. Actually it prevents user to use +

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

Or create a function which return text inside <span>

let hours = 20
let minutes = 7

const span = (text) => `<span>$text</span>`
document.getElementById('test').innerHTML = `$span(hours+"hrs")$span(minutes+"mins")`;

<div id="test"></div>

share|improve this answer

edited Mar 26 at 2:47

answered Mar 26 at 2:29

Maheer AliMaheer Ali

22.8k44 gold badges2121 silver badges3838 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please can downvoter explain reason for downvote?
  
  – Maheer Ali
  Mar 26 at 2:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I removed my downvote. I originally downvoted since it was the exact same as my answer which was before. Now I see you added something else
  
  – Aniket G
  Mar 26 at 2:37
  

  
  
  
  

add a comment | 

2

You can put the <span> in strings.

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span>" + "<span>" + minutes + "min" + "</span>";

share|improve this answer

edited Mar 26 at 2:29

answered Mar 26 at 2:27

Aniket GAniket G

2,75911 gold badge66 silver badges3131 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @NickParsons thanks. I fixed it
  
  – Aniket G
  Mar 26 at 2:29
  
  

  
  
  
  

add a comment | 

0

You could use ES6 template literals:

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

share|improve this answer

answered Mar 26 at 2:32

Nick ParsonsNick Parsons

12.5k33 gold badges1111 silver badges3131 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55348990%2fhow-to-insert-html-into-getdocumentbyid-innerhtml-function%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

5

You can just normally add the strings

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

<div id="test"></div>

Or in these case make use of Template Strings which allows you to interpolate expressions inside string. Actually it prevents user to use +

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

Or create a function which return text inside <span>

let hours = 20
let minutes = 7

const span = (text) => `<span>$text</span>`
document.getElementById('test').innerHTML = `$span(hours+"hrs")$span(minutes+"mins")`;

<div id="test"></div>

share|improve this answer

edited Mar 26 at 2:47

answered Mar 26 at 2:29

Maheer AliMaheer Ali

22.8k44 gold badges2121 silver badges3838 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please can downvoter explain reason for downvote?
  
  – Maheer Ali
  Mar 26 at 2:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I removed my downvote. I originally downvoted since it was the exact same as my answer which was before. Now I see you added something else
  
  – Aniket G
  Mar 26 at 2:37
  

  
  
  
  

add a comment | 

5

You can just normally add the strings

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

<div id="test"></div>

Or in these case make use of Template Strings which allows you to interpolate expressions inside string. Actually it prevents user to use +

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

Or create a function which return text inside <span>

let hours = 20
let minutes = 7

const span = (text) => `<span>$text</span>`
document.getElementById('test').innerHTML = `$span(hours+"hrs")$span(minutes+"mins")`;

<div id="test"></div>

share|improve this answer

edited Mar 26 at 2:47

answered Mar 26 at 2:29

Maheer AliMaheer Ali

22.8k44 gold badges2121 silver badges3838 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please can downvoter explain reason for downvote?
  
  – Maheer Ali
  Mar 26 at 2:32
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I removed my downvote. I originally downvoted since it was the exact same as my answer which was before. Now I see you added something else
  
  – Aniket G
  Mar 26 at 2:37
  

  
  
  
  

add a comment | 

You can just normally add the strings

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

<div id="test"></div>

Or in these case make use of Template Strings which allows you to interpolate expressions inside string. Actually it prevents user to use +

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

Or create a function which return text inside <span>

let hours = 20
let minutes = 7

const span = (text) => `<span>$text</span>`
document.getElementById('test').innerHTML = `$span(hours+"hrs")$span(minutes+"mins")`;

<div id="test"></div>

share|improve this answer

edited Mar 26 at 2:47

answered Mar 26 at 2:29

Maheer AliMaheer Ali

22.8k44 gold badges2121 silver badges3838 bronze badges

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

<div id="test"></div>

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

let hours = 20
let minutes = 7

const span = (text) => `<span>$text</span>`
document.getElementById('test').innerHTML = `$span(hours+"hrs")$span(minutes+"mins")`;

<div id="test"></div>

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

<div id="test"></div>

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

<div id="test"></div>

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

let hours = 20
let minutes = 7

const span = (text) => `<span>$text</span>`
document.getElementById('test').innerHTML = `$span(hours+"hrs")$span(minutes+"mins")`;

<div id="test"></div>

let hours = 20
let minutes = 7

const span = (text) => `<span>$text</span>`
document.getElementById('test').innerHTML = `$span(hours+"hrs")$span(minutes+"mins")`;

<div id="test"></div>

share|improve this answer

edited Mar 26 at 2:47

answered Mar 26 at 2:29

Maheer AliMaheer Ali

22.8k44 gold badges2121 silver badges3838 bronze badges

answered Mar 26 at 2:29

Maheer AliMaheer Ali

22.8k44 gold badges2121 silver badges3838 bronze badges

answered Mar 26 at 2:29

Maheer AliMaheer Ali

22.8k44 gold badges2121 silver badges3838 bronze badges

2

You can put the <span> in strings.

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span>" + "<span>" + minutes + "min" + "</span>";

share|improve this answer

edited Mar 26 at 2:29

answered Mar 26 at 2:27

Aniket GAniket G

2,75911 gold badge66 silver badges3131 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @NickParsons thanks. I fixed it
  
  – Aniket G
  Mar 26 at 2:29
  
  

  
  
  
  

add a comment | 

2

You can put the <span> in strings.

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span>" + "<span>" + minutes + "min" + "</span>";

share|improve this answer

edited Mar 26 at 2:29

answered Mar 26 at 2:27

Aniket GAniket G

2,75911 gold badge66 silver badges3131 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  @NickParsons thanks. I fixed it
  
  – Aniket G
  Mar 26 at 2:29
  
  

  
  
  
  

add a comment | 

You can put the <span> in strings.

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span>" + "<span>" + minutes + "min" + "</span>";

share|improve this answer

edited Mar 26 at 2:29

answered Mar 26 at 2:27

Aniket GAniket G

2,75911 gold badge66 silver badges3131 bronze badges

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span>" + "<span>" + minutes + "min" + "</span>";

share|improve this answer

edited Mar 26 at 2:29

answered Mar 26 at 2:27

Aniket GAniket G

2,75911 gold badge66 silver badges3131 bronze badges

answered Mar 26 at 2:27

Aniket GAniket G

2,75911 gold badge66 silver badges3131 bronze badges

answered Mar 26 at 2:27

Aniket GAniket G

2,75911 gold badge66 silver badges3131 bronze badges

0

You could use ES6 template literals:

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

share|improve this answer

answered Mar 26 at 2:32

Nick ParsonsNick Parsons

12.5k33 gold badges1111 silver badges3131 bronze badges

add a comment | 

0

You could use ES6 template literals:

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

share|improve this answer

answered Mar 26 at 2:32

Nick ParsonsNick Parsons

12.5k33 gold badges1111 silver badges3131 bronze badges

add a comment | 

You could use ES6 template literals:

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

share|improve this answer

answered Mar 26 at 2:32

Nick ParsonsNick Parsons

12.5k33 gold badges1111 silver badges3131 bronze badges

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>$hourshrs</span><span>$minutesmin</span>`;

<div id="test"></div>

share|improve this answer

answered Mar 26 at 2:32

Nick ParsonsNick Parsons

12.5k33 gold badges1111 silver badges3131 bronze badges

answered Mar 26 at 2:32

Nick ParsonsNick Parsons

12.5k33 gold badges1111 silver badges3131 bronze badges

answered Mar 26 at 2:32

Nick ParsonsNick Parsons

12.5k33 gold badges1111 silver badges3131 bronze badges