Adding Text In Div With Id's

I have this code below and I am trying to have a text infront then display the Javascript code. Example of code

<div id="Now"> </div>

How do I make it display “Today:” And then show Now next to it?

Sorry, but there isn’t nearly enough code there to demonstrate what you’re trying to achieve.

Is this related to Read Data From Excel?

I just wanna know how do you display just “Today:” What’s not enough ?

For example Putting Today inside <div>Today: </div> Will display Today. However when <divToday: id="now"> </div> It does not display Today: Followed by the code

Please watch your tone; there is no need to be rude.

Where is the text “today” coming from? Presumably you intend to insert it by JavaScript, but I see no JavaScript in your post.

Sorry but I am not being rude.
“Today:” is just a plain text that i want display it does not haaving anything to do with javscript

Then I don’t understand why you can’t just insert it as plain text:

<div id="Now">Today</div>

(Whether or not that is semantically the best choice of tag, I don’t know without further context.)

In this case the Time will appear first then folloed by Today. But i want to Show as "Today: (Now)

You’re still not explaining your problem.

Why can you not insert “Today (Now)” directly in the HTML?

<divToday: id="now"> </div> Id = now is javascript! Today is just a reference to display

Do you mean that you are using JavaScript to insert that and its contents? If so, it would appear you have two choices.

Either add “Today (Now)” to the content inserted by the script, or place it in another HTML element immediately after the content inserted by the script.

I am just trying to Have it display “Today”: (Now is a java script which = April)
So it will show Today: April. <div id="Now"></div>

And neither of the two approaches I suggested above works - why?

What do you mean by this?

If you are inserting <div id="Now"></div> using JavaScript, then simply create an element before it in your HTML:

e.g.

<p>Today</p>
<script>
Stuff to insert <div id="Now"> </div> goes here
</script>

@surajkay19

Do you need someone to show you how to arrange the HTML or do you need someone to write the JavaScript for you?

We need someone to explain what he is trying to do so we an understand it.

Can we strike a bargain here? A compromise that works for both of us?

This is a working page. Fill in the blanks for us:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>write to target element</title>
<!--
https://www.sitepoint.com/community/t/adding-text-in-div-with-ids/260440/12
surajkay19
-->
    <style type="text/css">
p {font-weight:bold;}
    </style>
</head>
<body>

<p>Today: <span id="now"></span></p>

<script>
//  your javascript that writes someting ("April"?) to the "span" element
</script>

</body>
</html>
2 Likes

Thank you @ronpat it works, I was missing the tags. What’s the purpose of span tags besides this?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>write to target element</title>
<!--
https://www.sitepoint.com/community/t/adding-text-in-div-with-ids/260440/12
surajkay19
-->
    <style type="text/css">
p {font-weight:bold;}
    </style>
</head>
<body>

<div> Today: <span id="now"></span></div> (//This is the solution.

<script>
// script here
</script>

</body>
</html>

span tags are an inline element. In this case, they surround text that should appear inline.
Paragraph tags are a block element. Block elements normally expand to fill the full width of available space.
The span tags must be inside the p element.
Notice the outline around the paragraph and the background-color assigned to the span.

(These notes are repeated at the top of the next example.)

I added an outline around the paragraph element and a background-color to the span element.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>write to target element</title>
<!--
https://www.sitepoint.com/community/t/adding-text-in-div-with-ids/260440/12
surajkay19

span tags are an inline element.  In this case, they surround text that should appear inline.
Paragraph tags are a block element.  Block elements normally expand to fill the full width of available space.
The span tags must be inside the p element.
Notice the outline around the paragraph and the background-color assigned to the span.

-->
    <style type="text/css">
p {
    font-weight:bold;
    outline:1px dashed red;
}
span {
    background-color:pink;
}
    </style>
</head>
<body>

<p>Today: <span id="now">April</span></p>

<script>
//  your javascript that writes someting ("April"?) to the "span" element
</script>

</body>
</html>

Outlines and background-colors help one see what is happening on a page. I couldn’t write code without using them.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.