document.getElementById() получает Null

Question

function createDiv(nameId,width,height,color) 
{ 
    try 
    { 
     // Initialize And Create Div 
     if(document.createElement('div')) 
     { 
      // document.write("<br>Create Div Success"); 
      if((nameId.length!=0) && (width>0) &&(height>0) && (color.length!=0)) 
      { 
       //creating div 
       var divCreate = document.createElement('div'); 

       divCreate.id=nameId; 
       document.getElementById(nameId).width = width; 
       document.getElementById(nameId).height = height; 
       document.getElementById(nameId).background = color; 
       document.getElementById(nameId).backgroundColor = "Red"; 
       document.body.appendChild(divCreate); 
       document.write(" <br>Create Div Success And Added To Body"); 

       // document.write(" <br>Create Div Success And Added To Body"); 
      } 
      else 
      { 
       //  document.write("<br>All Field Value Required"); 
      } 
     } 
     else 
     { 
      document.write("<br>Unable To Create Div"); 
     } 
    } 
    catch(e) 
    { 
     document.write("<br>"+e); 
    } 
} 

document.getElementById() получает Null. Я пытаюсь создать DIV с помощью javascript и назначить ему ширину/высоту и цвет, но он не работает. Однако, если я использую код ниже, создается div, но он не отображается на экране. И если я использую функцию createDiv(), она не работает.

divCreate.id=nameId; 
divCreate.width = width; 
divCreate.height = height; 
divCreate.background = color; 
divCreate.backgroundColor = "Red"; 
document.body.appendChild(divCreate); 

Answer 1

Появляется, что вы пытаетесь ссылаться на него перед тем, как добавить его.

Answer 2

createElement только создает элемент .. вам нужно сначала добавить элемент в документ для того, чтобы найти ..

Попробуйте добавить Append раньше и что должно работать:

 //creating div 
     var divCreate = document.createElement('div'); 

     divCreate.id=nameId; 
     document.body.appendChild(divCreate); <----------------------- 
     document.getElementById(nameId).width = width; 
     document.getElementById(nameId).height = height; 
     document.getElementById(nameId).background = color; 
     document.getElementById(nameId).backgroundColor = "Red"; 

     document.write(" <br>Create Div Success And Added To Body"); 

Answer 3

Там несколько пунктов, которые должны быть улучшены/зафиксированы в коде:

• у вас уже есть объект, так что вам не нужно использовать функцию getElementById, чтобы получить его (Кроме того, вы пытались получить объект, прежде чем добавить его к телу)
• Вы должны использовать .style для доступа к css свойств объекта
• Не используйте функцию document.write для печати статуса, поскольку он перепишет страницу если страница уже загружена.

Вот обновленный код:

//creating div 
     var divCreate = document.createElement('div'); 

     divCreate.id=nameId; 
     //to access the width and other css properties, you need to use the style 
     divCreate.style.width = width; 
     divCreate.style.height = height; 
     divCreate.style.background = color; 
     divCreate.style.backgroundColor = "Red"; 
     document.body.appendChild(divCreate);