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.
2 answers
solution1
1 2020-06-08 12:06:39
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>
solution2
1 2020-06-08 12:22:32
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.