+ 1

What's wrong with this code?

HTML: <!DOCTYPE html> <html> <head> <script> function addPara() { var para = document.createElement("p"); p.innerHTML = "Hello World!"; //Or var nodeText = createTextNode("Hello World!") } </script> </head> <body> <button onclick="addPara()">New paragraph</button> </body> </html> This code only outputs the button with no functionality. I'm new to coding, and what I'm attempting to code is when the button is clicked, a new paragraph with the text of "Hello World!" will be created beneath it. Once that works, I'm looking foward to make the paragraph editable to custom text so I'm guessing "Hello World!" should be placeholder text. Sorta like a viewable comment section when you come to think about it.

html js

3rd Feb 2019, 2:54 PM

Stevens, F.

5 Answers

+ 2

In order to make the paragraph appear, you have to use the appendChild method. document.body.appendChild(para); Also, in the 3rd line of the script tag, you should replace 'p' with 'para'. Very interesting project😀! Good luck!

3rd Feb 2019, 3:01 PM

giannismach

+ 4

Following below codes to add extra element to body: <!DOCTYPE html> <html> <head> <script> function addPara() { var para = document.createElement("p"); var nodeText = document.createTextNode("Hello World!"); para.appendChild(nodeText); document.body.appendChild(para); } </script> </head> <body> <button onclick="addPara()">New paragraph</button> </body> </html> https://code.sololearn.com/WbFIfQ0ZnJ4C/?ref=app

3rd Feb 2019, 3:09 PM

Calviղ