<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function displayString() {
return "<h1>Main Heading</h1>"
}
displayString();
document.write("Execute during page load from the head<br>");
</script>
</head>
<body>
<script>
document.write("Execute during page load from the body<br>");
</script>
</body>
</html>
So this is my problem. No matter where I put the displayString(), the h1 just never seems to show up on the browser. Can anybody please help me see where I am wrong? I am new to JavaScript. Oh, and what I am trying to do is to call the function.
-
1Wow, two upvote for this question..!!Nish– Nish2020年06月08日 12:23:47 +00:00Commented Jun 8, 2020 at 12:23
-
Yeah it's almost as if someone had asked for upvotes, maybe by people they know or those answering? Though that would be against the rules so, no, couldn't be that?!Liam– Liam2020年06月08日 12:35:49 +00:00Commented Jun 8, 2020 at 12:35
-
You’re "properly" calling the function—you’re just not doing anything with the function’s return value, e.g. using it in a call to document.write to add it as content to the document.hector-j-rivas– hector-j-rivas2020年06月08日 13:08:34 +00:00Commented Jun 8, 2020 at 13:08
2 Answers 2
You need to write the returned String to the document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function displayString() {
return "<h1>Main Heading</h1>"
}
document.write(displayString());
document.write("Execute during page load from the head<br>");
</script>
</head>
<body>
<script>
document.write("Execute during page load from the body<br>");
</script>
</body>
</html>1 Comment
No matter where I put the
displayString(), theh1just never seems to show up on the browser.
If you wish to add a new element to a document, several approaches are available:
document.write(effectively deprecated).innerHTML(sometimes useful, but can be slow)DOM API- recommended approach
The recommended approach is to use the DOM API.
DOM stands for Document Object Model. Essentially it's the markup of your document represented as a tree-like structure of nodes. There are many DOM API functions which allow you to:
- add
- remove
- append
- prepend
- insert
- update
new DOM nodes.
Any DOM node may be added, removed or updated, including:
- parent elements
- child elements
- sibling elements
- element attributes
ids,classNames,classLists- custom
data-*attributes - text nodes
Here is an example:
function displayMainHeading () {
let mainHeading = document.createElement('h1');
mainHeading.textContent = 'Main Heading';
document.body.prepend(mainHeading);
}
displayMainHeading();<p>Paragraph 1</p>
<p>Paragraph 2</p>Further Reading
This is a good primer to get you started: