Блог

Я пытаюсь сделать содержимое DOM с помощью Javascript. поэтому я создал элементы и добавил их в DOM. Однако атрибут не применяется к таблице, подобной границе. Я мог просто видеть текст. также я попытался изменить attirube после добавления. но не работает

   var iwContent = document.createElement("div");
  iwContent.className = 'infowindow';
  iwContent.setAttribute('style',"width:160px;text-align:center;padding:5px");
  
  var h3 = document.createElement("h3");
  var text = document.createTextNode("Hello");
 
  h3.appendChild(text);
  iwContent.appendChild(h3);

  var table = document.createElement("table");
  table.border = '1';
  table.style.textAlign = "center";
  //table.setAttribute('border', '1');
  //table.setAttribute('style',"border-collapse:collapse; text-align: center;");
  
  
  let thead = table.createTHead();
  let row = thead.insertRow();

  var th = document.createElement("td");

  var text1 = document.createTextNode("name");
  var text2 = document.createTextNode("manhole1");

  th.appendChild(text1);
  th.appendChild(text2);
  row.appendChild(th);

  iwContent.appendChild(row);
  

@Jaeseo Lee вы применили «border-collapse: collapse;» этот стиль к вашей таблице, из-за этого ваша граница исчезает, вы должны удалить это из кода. Я пробовал этот код и работает нормально.

 var iwContent = document.createElement("div");
iwContent.className = 'infowindow';
iwContent.setAttribute('style',"width:160px;text-align:center;padding:5px");

var h3 = document.createElement("h3");
var text = document.createTextNode("Hello");

h3.appendChild(text);
iwContent.appendChild(h3);

var table = document.createElement("table");
//table.border = '1';  //this is also working
table.width='50%';
table.height='50%';
table.style.textAlign = "center";
//table.setAttribute('border', '1');  //this is also working
table.setAttribute('style','border:1px solid blue; text-align:center;');


let thead = table.createTHead();
let row = thead.insertRow();
var th = document.createElement("th");

var text1 = document.createTextNode("name");
var text2 = document.createTextNode("manhole1");

th.appendChild(text1);
th.appendChild(text2);

row.appendChild(th);

iwContent.appendChild(row);