Adding HTML object to DOM using JavaScript. Showing blank.

Question

Hi,

I'm attempting to creat a HTML button using JavaScript (seemingly simple), yet for some reason the object isn't being placed on the page.

Do I need to append it to the DOM or somehow create an instance of it?

Here is my code:

function loadNavigation() {
var backButton;
backButton = document.createElement('input');
backButton.ID = 'backButton';
backButton.type = 'button';
backButton.innerHTML = 'Back';
backButton.onclick = 'function navigate(-1)';

}

Answer 1

You will have to use appendChild Method to append the button You created to already exisiting DOM

Answer 2

Yes. Just because you've created an element doesn't mean you've actually placed it on the page. The browser has no idea where you'd like to put it — at the beginning of the body? In the middle of a div you've defined?

You might use something like:

document.body.insertBefore(backButton, null);

If you've already got an element (perhaps with document.getElementById()) you can insert your new button with:

yourElement.appendChild(backButton);

Answer 3

You have to add the button to the DOM. The method createElement only creates the object but doesn't add it to the DOM. You can use the methods appendChild or insertBefore on the parent element.