CODEWITHSUNDEEP
javascripthtmldom
Jack Roscoe
Jack Roscoe

Reputation: 4313

Adding HTML object to DOM using JavaScript. Showing blank

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)';

}

Upvotes: 1

Views: 1299

Answers (3)

VoteyDisciple
VoteyDisciple

Reputation: 37813

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);

Upvotes: 1

Koen
Koen

Reputation: 3683

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.

Upvotes: 0

sushil bharwani
sushil bharwani

Reputation: 30197

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

Upvotes: 3

Related Questions