How do I call the JavaScript function properly?

Question

<!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.

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, Jun 08 '20 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, Jun 08 '20 at 13:08

score 1 · Answer 1 · answered Jun 08 '20 at 12:06

1

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>

answered Jun 08 '20 at 12:06

Majed Badawi

27,616
4
25
48

1

[Don't use `document.write`](https://stackoverflow.com/questions/19941866/document-write-overwriting-the-document) – Liam Jun 08 '20 at 12:40

Rounin · Answer 2 · 2020-06-08T20:45:07.437

No matter where I put the displayString(), the h1 just 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>

How do I call the JavaScript function properly?

2 Answers2

Further Reading