当我尝试 select 它的属性时，documentCreatElement(div) 返回 undefined

Question

1. I created a div with the document createElement() function,
2. I added an id attribute to it by using the setAttribute() function,

3. Now am trying to retrieve the elements with the getElementbyId() function but it's returning undefined. My code looks like this:

   //initially

   var contact= document.createElement('div'); contact.setAttribute('id','contact-grid');

   //later on

   var to=document.getElementById('contact-grid')` to.onclick=function(){ alert('contact clicked'); }

   //The code above is not working Console says: I cannot set onclick of undefined. Please kindly tell me what AI am doing wrong

Answer 1

In order to dynamically create and append elements we have to use below methods to achieve what we need. The GetElemenetById function is applicable only if you have applied the appended the newly created element.

1. document.createElement() - This method creates the HTML element with the tag name passed as parameter. example :create a li element:-

    var dynamicLi = document.createElement("li");

2. element.setAttribute() - This method is use to set attribute. example - add id in the newly create li tag":-

    dynamicLI.setAttribute("id","li1");

3. node.appendChild() - This method append a node to the end of the list of children of a specified parent node. example - add newly created li tag to its parent ul tag :-

    let ul = document.getElementById("dynamic-list"); // we get the parent node ul.appendChild(li); // we append the li in the ul tag.

So, below is the working code snippet, using step defined above:

  let ul = document.getElementById("Ul");  
  let li = document.createElement("li");
  li.setAttribute('id','li1');
  ul.appendChild(li);

  let newlyElem =document.getElementById("li1");  //code to find newly created element by element by id after append child.