CODEWITHSUNDEEP
javascripthtmlfunctioncall
sheehancein
sheehancein

Reputation: 29

How do I call the JavaScript function properly?

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

Upvotes: 2

Views: 71

Answers (2)

Rounin
Rounin

Reputation: 29453

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>

Further Reading

This is a good primer to get you started:

Upvotes: 1

Majed Badawi
Majed Badawi

Reputation: 28404

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>

Upvotes: 1

Related Questions