Question

我目前正在为我的大学开发Chrome扩展程序，我已经完成了大部分我想要做的事情，但我遇到的一件事就是每当我尝试选择第一个<table>标签时此link中的导航栏我似乎无法隐藏它，然后使用CSS添加我的自定义导航栏。

这是我的代码（我已经包含了我想要添加的随机createtextnode，以便了解我想做什么或者我想做什么）：

CSS

table:nth-child(1)
{
    display:none;
}

的JavaScript

var note = document.getElementsByName('stud_login')[0];
var par = document.createElement("div");
var tag = document.createElement("a");
var t1 = document.createTextNode(" Hello! Please try to refresh page again if the verification is not filled properly.");
var t2 = document.createTextNode("Click here");
var t3 = document.createTextNode(" Any suggestions? ");
var br = document.createElement("br");

par.setAttribute("class", "info-msg"); 

par.appendChild(t1);
tag.setAttribute("href", "http://goo.gl/forms/QI8gPMfKML");
tag.setAttribute("target", "_blank");
tag.setAttribute("id", "rahultag");
par.appendChild(t3);
tag.appendChild(t2);
par.appendChild(tag);
note.parentElement.appendChild(par);

这是我想要定位的HTML代码，是第一个出现的表：

<table width="100%" height="15%" border="0" align="center" cellpadding="0" cellspacing="0" background="images/banner_bg3.jpg">
  <tr>
    <td width="25%" align=left>&nbsp;
        <img src="images/vit_logo6.jpg" height="76" width="297">
    </td>
    <td align=center>
        <br>
        <font size=5 color=#FFFFFF face="Comic Sans MS">
        <b>V-TOP</b><br>Student Login
        </font>
    </td>
  </tr>
</table>

Answer 1

要定位第一个table，这可能会为您提供所需的结果

var note = document.getElementsByTagName('table')[0];

如果table不是其父级中的第一个元素，则需要使用insertBefore代替appendChild

note.parentElement.insertBefore(par, note);

旁注：

如果table:nth-child(1) { display: none; }不起作用，您可以使用replaceChild将table替换为新元素

note.parentElement.replaceChild(par, note);

或只是将其删除

note.parentElement.removeChild(note);

但请注意，如果您要删除它，请在插入新内容后执行此操作，否则将无法在何处插入新内容。

如果您仍需要在添加之前删除，请在此处阅读更多内容，了解如何删除该元素的下一个兄弟：https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

如何在扩展名中使用CSS更改表格导航栏？

CSS

的JavaScript

1 个答案: