document.getElementById giving Null by JS not by HTML

Question

When I am defining my input tag in html and accessing in JS by id then I am getting my tag.

HTML Code:

<input class="easyui-combobox" name="language" style="width:30%;" id= "XX">

JS Code:

var cc = document.getElementById("XX");

Here things are fine.

But When I am creating from javascript and trying to access I am getting. I want dynamic So I need to create from JS.

JS Code:

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";

Here I am getting null after applying this:

var cc = document.getElementById("XX");

jafarbtech · Accepted Answer · 2020-08-14 07:53:50Z

6

You have to append your created element into the document using document.body.appendChild(input);

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input);
console.log(document.getElementById("XX"));

edited Aug 14, 2020 at 7:53

answered Jun 9, 2017 at 5:14

jafarbtech

7,0551 gold badge41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul · Accepted Answer · 2017-06-09 05:18:51Z

0

You have not appended your element

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input); 

var cc = document.getElementById("XX");
console.log(cc);

answered Jun 9, 2017 at 5:18

Rahul

2,4802 gold badges12 silver badges17 bronze badges

Comments

selvakumar · Accepted Answer · 2017-06-09 05:19:52Z

0

You need to append input element to document

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input);

answered Jun 9, 2017 at 5:19

selvakumar

6547 silver badges16 bronze badges

Comments

Rudraksh Pathak · Accepted Answer · 2017-06-09 05:23:38Z

0

You have created your element using -

var input = document.createElement("input");

Now you need to append it to HTML so that you can find it on DOM.

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input); 

var fetchedElement = document.getElementById("XX");
console.log(fetchedElement);

createElement() creates an Element Node.

appendChild() adds your element node to DOM.

answered Jun 9, 2017 at 5:23

Rudraksh Pathak

9188 silver badges21 bronze badges

Comments

Saurabh Bhandari · Accepted Answer · 2017-06-09 07:14:26Z

0

The element has been created, but needs to be appended to the DOM. Use the appendChild() or insertBefore() method.

var input = document.createElement("input");
input.className = 'easyui-combobox';
input.style = 'width:30%';
input.id = "XX";
document.body.appendChild(input);

edited Jun 9, 2017 at 7:14

Saurabh Bhandari

2,4584 gold badges28 silver badges33 bronze badges

answered Jun 9, 2017 at 5:49

lahaymd

714 bronze badges

Collectives™ on Stack Overflow

document.getElementById giving Null by JS not by HTML

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related