Question

我正在构建Chrome扩展程序，并尝试将HTML注入<li>。但它没有出现。这是我的代码：

$('.tab-nav-bar .tab-nav-bar-center ul').append('<li class="tab-nav"><a class="tab-nav-button" href="https://example.com">new li</a></li>');

以下是它被注入的HTML：

<div class="tab-nav-div">
    <ul class="tab-nav-bar tab-nav-bar-center">
        <li class="tab-nav">
            <a class="tab-nav-button " href="https://app.asana.com/.../files">Files</a>
        </li>
    </ul>
</div>

如果我$('body').append('<li class... >');它可以正常工作。所以我尝试了我认为不起作用的部分的多个排列 - 例如：'.tab-nav-bar.tab-nav-bar-center.ul'，'ul.tab-nav-bar.tab-nav-bar-center'等，但似乎无法得到它。

我知道（我认为）我的manifest.json正在工作，因为＆＃39;身体＆＃39;版本有效，但值得注意的是，这里是：

{
  "name": "Insert HTML",
  "description": "Inserts HTMLS",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],

    "content_scripts": [
       {
          "matches":    ["https://app.asana.com/*"],
                "js": ["jquery-1.8.1.min.js", "javascript.js" ]
       }
    ],

    "web_accessible_resources": [
        "go.css",
            "shawn-test.html"
        ],

  "icons": {
      "128": "icon/icon_128.png",
      "16": "icon/icon_16.png",
      "48": "icon/icon_48.png"
  },

  "browser_action": {
    "default_title": "goo goo"
  },
  "manifest_version": 2
}

Answer 1

尝试

 $('ul.tab-nav-bar.tab-nav-bar-center').append('<li class="tab-nav"><a class="tab-nav-button" href="https://example.com">new li</a></li>');

$('.tab-nav-bar tab-nav-bar-center ul')不起作用，因为它会查找 ul 作为.tab-nav-bar-center的子项，但在您的情况下，tab-nav-bar-center是 ul的类本身。因此，在您的情况下，$('ul.tab-nav-bar.tab-nav-bar-center')应该有效。

Answer 2

你有两个关于ul的课程

它应该是这样的

$('ul.tab-nav-bar.tab-nav-bar-center').append('<li class="tab-nav"><a class="tab-nav-button" href="https://example.com">new li</a></li>');

如果您在'tab-nav-div'中搜索，那么

$('.tab-nav-div ul.tab-nav-bar.tab-nav-bar-center').append('<li class="tab-nav"><a class="tab-nav-button" href="https://example.com">new li</a></li>');

JSFiddle https://jsfiddle.net/ne76vrmy/

使用js或jquery将html注入<li>

2 个答案: