代码之家 › 专栏 › 技术社区 › showkey

为什么不能用show函数写id=show属性?

html javascript

showkey · 技术社区 · 6 年前

 

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调用Show函数时,新表已创建,但没有 id="show" 它的归属,为什么? show函数的第一行是:

table_show = '<table id="show">';

为什么不呢 ID =“显示” 在创建的新表中?

5 回复 | 直到 6 年前

Giulio Bambini 6 年前

属性 身份证件 在文档中必须是唯一的,请改用类。你也不需要使用 createElement() 重新创建表,因为它已经在 HTML字符串 .

你可以使用 parent.innerHTML += table_show 更新容器中的HTML。您也可以使用 insertAdjacentHTML() 插入 HTML字符串 进入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>

Tigger 6 年前

正如所指出的 CertainPerformace 的评论,该问题与创建 table 然后附加另一个 桌子 为了它。因为这不是有效的HTML,所以浏览器会删除其中一个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">

Hanif 6 年前

事实上 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">

Muhammad Al Faris 6 年前

您创建了2个表标记,

table_show = '<table id="show">';

和

var tmp = document.createElement("table");

仅使用1个标记,如果要使用javascript,请使用 setAttribute() 用于将属性“id”添加到元素“table”的方法。

showkey 6 年前

另一种方式也指出 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">