Javascript - how to display line feed and how to output variable to the page
In the body, it can't present the variable value, but only shows variable name "var1". Besides, I use "n" in document.write, but how come it doesn't break the line in the result?
<script type="text/javascript">
var var1=123;
document.write("<strong>Hello World! nThis is the second line.</strong>");
</script>
</head>
<body>
<h1>the value for number is: + var1</h1>
</body>
javascript variables line break
add a comment |
In the body, it can't present the variable value, but only shows variable name "var1". Besides, I use "n" in document.write, but how come it doesn't break the line in the result?
<script type="text/javascript">
var var1=123;
document.write("<strong>Hello World! nThis is the second line.</strong>");
</script>
</head>
<body>
<h1>the value for number is: + var1</h1>
</body>
javascript variables line break
You can't display a variable like that. However, you can create a new element with tagh1
and format the value of your variable in.
– e.doroskevic
Nov 23 '18 at 23:48
n
aka, "line feed", doesn't show in HTML, unless it's within<pre>
tags*. If you want it on a separate line, then you need to use a<br>
tag, or wrap the line(s) in<p>
tags. *technically, within any element styled to havewhite-space: pre
– cale_b
Nov 24 '18 at 0:00
1
Possible duplicate of how to display a javascript var in html body
– cale_b
Nov 24 '18 at 0:02
Please read How to Ask, and pay special attention to the part about only asking one question at a time.
– cale_b
Nov 24 '18 at 0:06
add a comment |
In the body, it can't present the variable value, but only shows variable name "var1". Besides, I use "n" in document.write, but how come it doesn't break the line in the result?
<script type="text/javascript">
var var1=123;
document.write("<strong>Hello World! nThis is the second line.</strong>");
</script>
</head>
<body>
<h1>the value for number is: + var1</h1>
</body>
javascript variables line break
In the body, it can't present the variable value, but only shows variable name "var1". Besides, I use "n" in document.write, but how come it doesn't break the line in the result?
<script type="text/javascript">
var var1=123;
document.write("<strong>Hello World! nThis is the second line.</strong>");
</script>
</head>
<body>
<h1>the value for number is: + var1</h1>
</body>
javascript variables line break
javascript variables line break
edited Nov 24 '18 at 0:06
cale_b
19.8k44982
19.8k44982
asked Nov 23 '18 at 23:44
CathyCathy
124
124
You can't display a variable like that. However, you can create a new element with tagh1
and format the value of your variable in.
– e.doroskevic
Nov 23 '18 at 23:48
n
aka, "line feed", doesn't show in HTML, unless it's within<pre>
tags*. If you want it on a separate line, then you need to use a<br>
tag, or wrap the line(s) in<p>
tags. *technically, within any element styled to havewhite-space: pre
– cale_b
Nov 24 '18 at 0:00
1
Possible duplicate of how to display a javascript var in html body
– cale_b
Nov 24 '18 at 0:02
Please read How to Ask, and pay special attention to the part about only asking one question at a time.
– cale_b
Nov 24 '18 at 0:06
add a comment |
You can't display a variable like that. However, you can create a new element with tagh1
and format the value of your variable in.
– e.doroskevic
Nov 23 '18 at 23:48
n
aka, "line feed", doesn't show in HTML, unless it's within<pre>
tags*. If you want it on a separate line, then you need to use a<br>
tag, or wrap the line(s) in<p>
tags. *technically, within any element styled to havewhite-space: pre
– cale_b
Nov 24 '18 at 0:00
1
Possible duplicate of how to display a javascript var in html body
– cale_b
Nov 24 '18 at 0:02
Please read How to Ask, and pay special attention to the part about only asking one question at a time.
– cale_b
Nov 24 '18 at 0:06
You can't display a variable like that. However, you can create a new element with tag
h1
and format the value of your variable in.– e.doroskevic
Nov 23 '18 at 23:48
You can't display a variable like that. However, you can create a new element with tag
h1
and format the value of your variable in.– e.doroskevic
Nov 23 '18 at 23:48
n
aka, "line feed", doesn't show in HTML, unless it's within <pre>
tags*. If you want it on a separate line, then you need to use a <br>
tag, or wrap the line(s) in <p>
tags. *technically, within any element styled to have white-space: pre
– cale_b
Nov 24 '18 at 0:00
n
aka, "line feed", doesn't show in HTML, unless it's within <pre>
tags*. If you want it on a separate line, then you need to use a <br>
tag, or wrap the line(s) in <p>
tags. *technically, within any element styled to have white-space: pre
– cale_b
Nov 24 '18 at 0:00
1
1
Possible duplicate of how to display a javascript var in html body
– cale_b
Nov 24 '18 at 0:02
Possible duplicate of how to display a javascript var in html body
– cale_b
Nov 24 '18 at 0:02
Please read How to Ask, and pay special attention to the part about only asking one question at a time.
– cale_b
Nov 24 '18 at 0:06
Please read How to Ask, and pay special attention to the part about only asking one question at a time.
– cale_b
Nov 24 '18 at 0:06
add a comment |
3 Answers
3
active
oldest
votes
Here is a basic example.
const name = 'john doe';
const header = document.createElement('h1');
const text = document.createTextNode(`my name is ${name}`);
header.appendChild(text);
document.body.appendChild(header);
More practical way to do it is using textContent property of HTML nodes.const myDiv = document.querySelector('#some-id');
const myVariable = 'Some data about something';
myDiv.textContent = myVariable;
if you'd like to concatenate to the existing stringmyDiv.textContent = myDiv.textContent + ' Some more string';
– Ertan Kara
Nov 23 '18 at 23:57
Might be better to mark this question as a duplicate (which it is), rather than offering a new answer :) To understand why, maybe check this out: meta.stackexchange.com/a/10844/178653
– cale_b
Nov 24 '18 at 0:03
@cale_b i agree :)
– e.doroskevic
Nov 24 '18 at 0:06
add a comment |
Use the line-break tag, br, instead of n.
As for the displaying the variable:
The variable var1 can only be used inside the javascript code block. The line
<h1>the value for number is: + var1</h1>
will not be executed as actual javascript code since it is not inside the javascript block. You can do it like this:
<head />
<script>
function main() {
var var1=123;
document.getElementById("text").innerHTML += var1
}
document.write("<strong>Hello World! <br />This is the second line.</strong>");
</script>
</head>
<body onLoad="main()">
<h1 id="text">the value for number is: </h1>
</body>
add a comment |
As for the variable part of the question, there are at least 2 ways of achieving what you want:
Method 1
Use DOM Manipulation to change the inner text of the h1 tag like so:
var var1=123;
document.getElementsByTagName('h1')[0].innerText = "the value for number is: " + var1
Method 2
You can write html in EJS(Embedded Javascript) format, where in essence you can pass variables directly to the html tags:
<% var var1=123; %>
<h1>the value for number is: <%= var1 %></h1>
If you are interested in learning about EJS then look here. It's worth mentioning that EJS is an external library (thanks cale_b for pointing this out in the comments)
As for the break part of the question, you need to replace "n":
document.write("<strong>Hello World! <br/>This is the second line.</strong>");
It's worth mentioning that ejs is a library, may not be worth the overhead to bring in a library. If OP is going to do a lot of this, then it may make sense - but IMO there's usually a lighter-weight way to solve problems like this.
– cale_b
Nov 24 '18 at 0:05
@cale_b I agree, it does require installing an external library, that's why I have provided 2 methods of solving this problem, where method 1 does not require external libraries, and method 2 does. This way the OP can choose, which method is more suitable in his/her situation.
– Devtician
Nov 24 '18 at 0:09
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453962%2fjavascript-how-to-display-line-feed-and-how-to-output-variable-to-the-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here is a basic example.
const name = 'john doe';
const header = document.createElement('h1');
const text = document.createTextNode(`my name is ${name}`);
header.appendChild(text);
document.body.appendChild(header);
More practical way to do it is using textContent property of HTML nodes.const myDiv = document.querySelector('#some-id');
const myVariable = 'Some data about something';
myDiv.textContent = myVariable;
if you'd like to concatenate to the existing stringmyDiv.textContent = myDiv.textContent + ' Some more string';
– Ertan Kara
Nov 23 '18 at 23:57
Might be better to mark this question as a duplicate (which it is), rather than offering a new answer :) To understand why, maybe check this out: meta.stackexchange.com/a/10844/178653
– cale_b
Nov 24 '18 at 0:03
@cale_b i agree :)
– e.doroskevic
Nov 24 '18 at 0:06
add a comment |
Here is a basic example.
const name = 'john doe';
const header = document.createElement('h1');
const text = document.createTextNode(`my name is ${name}`);
header.appendChild(text);
document.body.appendChild(header);
More practical way to do it is using textContent property of HTML nodes.const myDiv = document.querySelector('#some-id');
const myVariable = 'Some data about something';
myDiv.textContent = myVariable;
if you'd like to concatenate to the existing stringmyDiv.textContent = myDiv.textContent + ' Some more string';
– Ertan Kara
Nov 23 '18 at 23:57
Might be better to mark this question as a duplicate (which it is), rather than offering a new answer :) To understand why, maybe check this out: meta.stackexchange.com/a/10844/178653
– cale_b
Nov 24 '18 at 0:03
@cale_b i agree :)
– e.doroskevic
Nov 24 '18 at 0:06
add a comment |
Here is a basic example.
const name = 'john doe';
const header = document.createElement('h1');
const text = document.createTextNode(`my name is ${name}`);
header.appendChild(text);
document.body.appendChild(header);
Here is a basic example.
const name = 'john doe';
const header = document.createElement('h1');
const text = document.createTextNode(`my name is ${name}`);
header.appendChild(text);
document.body.appendChild(header);
edited Nov 23 '18 at 23:57
answered Nov 23 '18 at 23:54
e.doroskevice.doroskevic
1,6711123
1,6711123
More practical way to do it is using textContent property of HTML nodes.const myDiv = document.querySelector('#some-id');
const myVariable = 'Some data about something';
myDiv.textContent = myVariable;
if you'd like to concatenate to the existing stringmyDiv.textContent = myDiv.textContent + ' Some more string';
– Ertan Kara
Nov 23 '18 at 23:57
Might be better to mark this question as a duplicate (which it is), rather than offering a new answer :) To understand why, maybe check this out: meta.stackexchange.com/a/10844/178653
– cale_b
Nov 24 '18 at 0:03
@cale_b i agree :)
– e.doroskevic
Nov 24 '18 at 0:06
add a comment |
More practical way to do it is using textContent property of HTML nodes.const myDiv = document.querySelector('#some-id');
const myVariable = 'Some data about something';
myDiv.textContent = myVariable;
if you'd like to concatenate to the existing stringmyDiv.textContent = myDiv.textContent + ' Some more string';
– Ertan Kara
Nov 23 '18 at 23:57
Might be better to mark this question as a duplicate (which it is), rather than offering a new answer :) To understand why, maybe check this out: meta.stackexchange.com/a/10844/178653
– cale_b
Nov 24 '18 at 0:03
@cale_b i agree :)
– e.doroskevic
Nov 24 '18 at 0:06
More practical way to do it is using textContent property of HTML nodes.
const myDiv = document.querySelector('#some-id');
const myVariable = 'Some data about something';
myDiv.textContent = myVariable;
if you'd like to concatenate to the existing string myDiv.textContent = myDiv.textContent + ' Some more string';
– Ertan Kara
Nov 23 '18 at 23:57
More practical way to do it is using textContent property of HTML nodes.
const myDiv = document.querySelector('#some-id');
const myVariable = 'Some data about something';
myDiv.textContent = myVariable;
if you'd like to concatenate to the existing string myDiv.textContent = myDiv.textContent + ' Some more string';
– Ertan Kara
Nov 23 '18 at 23:57
Might be better to mark this question as a duplicate (which it is), rather than offering a new answer :) To understand why, maybe check this out: meta.stackexchange.com/a/10844/178653
– cale_b
Nov 24 '18 at 0:03
Might be better to mark this question as a duplicate (which it is), rather than offering a new answer :) To understand why, maybe check this out: meta.stackexchange.com/a/10844/178653
– cale_b
Nov 24 '18 at 0:03
@cale_b i agree :)
– e.doroskevic
Nov 24 '18 at 0:06
@cale_b i agree :)
– e.doroskevic
Nov 24 '18 at 0:06
add a comment |
Use the line-break tag, br, instead of n.
As for the displaying the variable:
The variable var1 can only be used inside the javascript code block. The line
<h1>the value for number is: + var1</h1>
will not be executed as actual javascript code since it is not inside the javascript block. You can do it like this:
<head />
<script>
function main() {
var var1=123;
document.getElementById("text").innerHTML += var1
}
document.write("<strong>Hello World! <br />This is the second line.</strong>");
</script>
</head>
<body onLoad="main()">
<h1 id="text">the value for number is: </h1>
</body>
add a comment |
Use the line-break tag, br, instead of n.
As for the displaying the variable:
The variable var1 can only be used inside the javascript code block. The line
<h1>the value for number is: + var1</h1>
will not be executed as actual javascript code since it is not inside the javascript block. You can do it like this:
<head />
<script>
function main() {
var var1=123;
document.getElementById("text").innerHTML += var1
}
document.write("<strong>Hello World! <br />This is the second line.</strong>");
</script>
</head>
<body onLoad="main()">
<h1 id="text">the value for number is: </h1>
</body>
add a comment |
Use the line-break tag, br, instead of n.
As for the displaying the variable:
The variable var1 can only be used inside the javascript code block. The line
<h1>the value for number is: + var1</h1>
will not be executed as actual javascript code since it is not inside the javascript block. You can do it like this:
<head />
<script>
function main() {
var var1=123;
document.getElementById("text").innerHTML += var1
}
document.write("<strong>Hello World! <br />This is the second line.</strong>");
</script>
</head>
<body onLoad="main()">
<h1 id="text">the value for number is: </h1>
</body>
Use the line-break tag, br, instead of n.
As for the displaying the variable:
The variable var1 can only be used inside the javascript code block. The line
<h1>the value for number is: + var1</h1>
will not be executed as actual javascript code since it is not inside the javascript block. You can do it like this:
<head />
<script>
function main() {
var var1=123;
document.getElementById("text").innerHTML += var1
}
document.write("<strong>Hello World! <br />This is the second line.</strong>");
</script>
</head>
<body onLoad="main()">
<h1 id="text">the value for number is: </h1>
</body>
answered Nov 24 '18 at 0:01
Viktor WViktor W
564
564
add a comment |
add a comment |
As for the variable part of the question, there are at least 2 ways of achieving what you want:
Method 1
Use DOM Manipulation to change the inner text of the h1 tag like so:
var var1=123;
document.getElementsByTagName('h1')[0].innerText = "the value for number is: " + var1
Method 2
You can write html in EJS(Embedded Javascript) format, where in essence you can pass variables directly to the html tags:
<% var var1=123; %>
<h1>the value for number is: <%= var1 %></h1>
If you are interested in learning about EJS then look here. It's worth mentioning that EJS is an external library (thanks cale_b for pointing this out in the comments)
As for the break part of the question, you need to replace "n":
document.write("<strong>Hello World! <br/>This is the second line.</strong>");
It's worth mentioning that ejs is a library, may not be worth the overhead to bring in a library. If OP is going to do a lot of this, then it may make sense - but IMO there's usually a lighter-weight way to solve problems like this.
– cale_b
Nov 24 '18 at 0:05
@cale_b I agree, it does require installing an external library, that's why I have provided 2 methods of solving this problem, where method 1 does not require external libraries, and method 2 does. This way the OP can choose, which method is more suitable in his/her situation.
– Devtician
Nov 24 '18 at 0:09
add a comment |
As for the variable part of the question, there are at least 2 ways of achieving what you want:
Method 1
Use DOM Manipulation to change the inner text of the h1 tag like so:
var var1=123;
document.getElementsByTagName('h1')[0].innerText = "the value for number is: " + var1
Method 2
You can write html in EJS(Embedded Javascript) format, where in essence you can pass variables directly to the html tags:
<% var var1=123; %>
<h1>the value for number is: <%= var1 %></h1>
If you are interested in learning about EJS then look here. It's worth mentioning that EJS is an external library (thanks cale_b for pointing this out in the comments)
As for the break part of the question, you need to replace "n":
document.write("<strong>Hello World! <br/>This is the second line.</strong>");
It's worth mentioning that ejs is a library, may not be worth the overhead to bring in a library. If OP is going to do a lot of this, then it may make sense - but IMO there's usually a lighter-weight way to solve problems like this.
– cale_b
Nov 24 '18 at 0:05
@cale_b I agree, it does require installing an external library, that's why I have provided 2 methods of solving this problem, where method 1 does not require external libraries, and method 2 does. This way the OP can choose, which method is more suitable in his/her situation.
– Devtician
Nov 24 '18 at 0:09
add a comment |
As for the variable part of the question, there are at least 2 ways of achieving what you want:
Method 1
Use DOM Manipulation to change the inner text of the h1 tag like so:
var var1=123;
document.getElementsByTagName('h1')[0].innerText = "the value for number is: " + var1
Method 2
You can write html in EJS(Embedded Javascript) format, where in essence you can pass variables directly to the html tags:
<% var var1=123; %>
<h1>the value for number is: <%= var1 %></h1>
If you are interested in learning about EJS then look here. It's worth mentioning that EJS is an external library (thanks cale_b for pointing this out in the comments)
As for the break part of the question, you need to replace "n":
document.write("<strong>Hello World! <br/>This is the second line.</strong>");
As for the variable part of the question, there are at least 2 ways of achieving what you want:
Method 1
Use DOM Manipulation to change the inner text of the h1 tag like so:
var var1=123;
document.getElementsByTagName('h1')[0].innerText = "the value for number is: " + var1
Method 2
You can write html in EJS(Embedded Javascript) format, where in essence you can pass variables directly to the html tags:
<% var var1=123; %>
<h1>the value for number is: <%= var1 %></h1>
If you are interested in learning about EJS then look here. It's worth mentioning that EJS is an external library (thanks cale_b for pointing this out in the comments)
As for the break part of the question, you need to replace "n":
document.write("<strong>Hello World! <br/>This is the second line.</strong>");
edited Nov 24 '18 at 0:12
answered Nov 24 '18 at 0:03
DevticianDevtician
266
266
It's worth mentioning that ejs is a library, may not be worth the overhead to bring in a library. If OP is going to do a lot of this, then it may make sense - but IMO there's usually a lighter-weight way to solve problems like this.
– cale_b
Nov 24 '18 at 0:05
@cale_b I agree, it does require installing an external library, that's why I have provided 2 methods of solving this problem, where method 1 does not require external libraries, and method 2 does. This way the OP can choose, which method is more suitable in his/her situation.
– Devtician
Nov 24 '18 at 0:09
add a comment |
It's worth mentioning that ejs is a library, may not be worth the overhead to bring in a library. If OP is going to do a lot of this, then it may make sense - but IMO there's usually a lighter-weight way to solve problems like this.
– cale_b
Nov 24 '18 at 0:05
@cale_b I agree, it does require installing an external library, that's why I have provided 2 methods of solving this problem, where method 1 does not require external libraries, and method 2 does. This way the OP can choose, which method is more suitable in his/her situation.
– Devtician
Nov 24 '18 at 0:09
It's worth mentioning that ejs is a library, may not be worth the overhead to bring in a library. If OP is going to do a lot of this, then it may make sense - but IMO there's usually a lighter-weight way to solve problems like this.
– cale_b
Nov 24 '18 at 0:05
It's worth mentioning that ejs is a library, may not be worth the overhead to bring in a library. If OP is going to do a lot of this, then it may make sense - but IMO there's usually a lighter-weight way to solve problems like this.
– cale_b
Nov 24 '18 at 0:05
@cale_b I agree, it does require installing an external library, that's why I have provided 2 methods of solving this problem, where method 1 does not require external libraries, and method 2 does. This way the OP can choose, which method is more suitable in his/her situation.
– Devtician
Nov 24 '18 at 0:09
@cale_b I agree, it does require installing an external library, that's why I have provided 2 methods of solving this problem, where method 1 does not require external libraries, and method 2 does. This way the OP can choose, which method is more suitable in his/her situation.
– Devtician
Nov 24 '18 at 0:09
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453962%2fjavascript-how-to-display-line-feed-and-how-to-output-variable-to-the-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can't display a variable like that. However, you can create a new element with tag
h1
and format the value of your variable in.– e.doroskevic
Nov 23 '18 at 23:48
n
aka, "line feed", doesn't show in HTML, unless it's within<pre>
tags*. If you want it on a separate line, then you need to use a<br>
tag, or wrap the line(s) in<p>
tags. *technically, within any element styled to havewhite-space: pre
– cale_b
Nov 24 '18 at 0:00
1
Possible duplicate of how to display a javascript var in html body
– cale_b
Nov 24 '18 at 0:02
Please read How to Ask, and pay special attention to the part about only asking one question at a time.
– cale_b
Nov 24 '18 at 0:06