Почему нельзя указать атрибуцию id = show с помощью функции show?
function show(){
table_show = '<table id = "show">';
table_show += "<tr>";
table_show += "<td>" + "id" + "</td>";
table_show += "<td>" + "date" + "</td>";
table_show += "<td>" + "type" + "</td>";
table_show += "</tr>";
table_show += "</table>";
var parent = document.body;
var tmp = document.createElement("table");
tmp.innerHTML = table_show;
parent.appendChild(tmp);
}
ob = document.getElementById("bShow");
ob.addEventListener("click",show);
<input id = "bShow" type = "button" value = "show_table">
Я хочу добавить новую таблицу с функцией show, когда вы нажимаете кнопку, чтобы вызвать функцию показа через addEventListener, новая таблица создается, но без атрибуции id = "show" в ней, почему?
Первая строка в функции show:
table_show = '<table id = "show">';
Почему не создается id = "show" в новой таблице?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы создали 2 тега таблицы,
table_show = '<table id = "show">';
и
var tmp = document.createElement("table");
используйте только 1 тег, если вы хотите использовать javascript, используйте метод setAttribute () для добавления атрибута id в таблицу вашего элемента.
Как указано в комментарии CertainPerformace, проблема связана с созданием table с последующим добавлением к нему другого table. Поскольку это недействительный HTML-код, он удаляется браузером (или любое количество вещей, которые браузер решает сделать).
Следующее будет работать и создать действительный HTML.
function show(){
table_show = "<tr>";
table_show += "<td>" + "id" + "</td>";
table_show += "<td>" + "date" + "</td>";
table_show += "<td>" + "type" + "</td>";
table_show += "</tr>";
var parent = document.body;
var tmp = document.createElement("table");
tmp.setAttribute("id","show");
tmp.innerHTML = table_show;
parent.appendChild(tmp);
}
ob = document.getElementById("bShow");
ob.addEventListener("click",show);<input id = "bShow" type = "button" value = "show_table">Фактически var tmp = document.createElement("table"); удаляет ваш атрибут id. Потому что document.createElement всегда возвращает чистый элемент DOM. Слегка обновите ваше шоу function(), как показано в следующем фрагменте:
function show(){
table_show = '';
table_show += "<tr>";
table_show += "<td>" + "id" + "</td>";
table_show += "<td>" + "date" + "</td>";
table_show += "<td>" + "type" + "</td>";
table_show += "</tr>";
var parent = document.body;
var tmp = document.createElement("table");
tmp.id = 'show';
tmp.innerHTML = table_show;
parent.appendChild(tmp);
}
ob = document.getElementById("bShow");
ob.addEventListener("click",show);<input id = "bShow" type = "button" value = "show_table">Атрибут я бы должен быть уникальным в документе, вместо этого используйте class. Вам также не нужно использовать createElement() для повторного создания таблицы, поскольку она уже находится в htmlString.
Вы можете использовать parent.innerHTML += table_show для обновления HTML в контейнере.
Вы также можете использовать insertAdjacentHTML() для вставки htmlString в DOM.
var parent = document.getElementById("container");
function show(){
table_show = '<table class = "show">';
table_show += "<tr>";
table_show += "<td>" + "id" + "</td>";
table_show += "<td>" + "date" + "</td>";
table_show += "<td>" + "type" + "</td>";
table_show += "</tr>";
table_show += "</table>";
parent.insertAdjacentHTML('beforeend', table_show);
}
ob = document.getElementById("bShow");
ob.addEventListener("click",show);<input id = "bShow" type = "button" value = "show_table">
<div id = "container"></div>Другой способ, также указанный CertainPerformance, решить с помощью outerHTML.
function show(){
table_show = '<table id = "show">';
table_show += "<tr>";
table_show += "<td>" + "id" + "</td>";
table_show += "<td>" + "date" + "</td>";
table_show += "<td>" + "type" + "</td>";
table_show += "</tr>";
table_show += "</table>";
var parent = document.body;
var tmp = document.createElement("table");
parent.appendChild(tmp);
tmp.outerHTML = table_show;
}
ob = document.getElementById("bShow");
ob.addEventListener("click",show);
<input id = "bShow" type = "button" value = "show_table">
Потому что вы сделали
document.createElement("table");. Либо добавьтеouterHTMLтега, как в случае с<table id = "show">, либо используйтеdocument.createElement('table'), но не оба сразу.