尝试使用 javascript 创建自定义 HTML 节点以进行页面注入答案

【问题标题】：Trying to create custom HTML nodes with javascript for page injection尝试使用 javascript 创建自定义 HTML 节点以进行页面注入
【发布时间】：2021-01-07 22:42:03
【问题描述】：

目前我正在尝试使用我正在开发的 chrome 扩展将一些 HTML 注入到 Youtube 的页面上。他们在他们的页面上使用自定义 HTML，所以我正在创建像他们一样的自定义 DOM 节点。

  const channelSection = document.createElement("ytd-rich-section-renderer");

但是，当我执行上述节点时，我在页面上的任何地方都看不到注入的 HTML。为了对此进行错误测试，我改为将标签名称换成基本的div 标签，然后它就可以工作了。

作为参考，我正在查看 this 其他 stackoverflow 问题以实现我的目标。感谢您的帮助！

编辑：感谢所有的回复！所以在重新加载了几次扩展之后，我实际上可以看到我的自定义 HTML 通过控制台注入到页面中。

content.js


  const ce = function(tag) {
        return document.createElement(tag)
     }
  const channelSection = ce("ytd-rich-section-renderer");
  channelSection.classList.add("style-scope", "ytd-rich-grid-renderer");

  let content = ce("div");
  content.classList.add("style-scope", "ytd-rich-section-renderer");

  let subContent = ce("ytd-rich-shelf-renderer");
  subContent.classList.add("style-scope", "ytd-rich-section-renderer");

  let dismiss = ce("div");
  dismiss.setAttribute("id", "dismissable");
  dismiss.classList.add("style-scope", "ytd-rich-shelf-renderer");

  // Heading
  let richShelf = ce("div");
  richShelf.setAttribute("id", "rich-shelf-header");
  richShelf.classList.add("style-scope", "ytd-rich-shelf-renderer");

  // Put Cards In here
  let contents = ce("div");
  contents.setAttribute("id", "contents");
  contents.classList.add("style-scope", "ytd-rich-shelf-renderer");

  dismiss.appendChild(richShelf);
  dismiss.appendChild(contents);
  subContent.appendChild(dismiss);
  content.appendChild(subContent);
  channelSection.appendChild(content);

  // This works
  let mainPage = document.querySelector("#contents");
      mainPage.prepend(channelSection);

现在我的主要问题是我只在页面上看到 channelSection 和 content 节点。我是否可能错误地附加了 DOM 节点？

【问题讨论】：

能否发下完整的相关代码？
您正在创建元素...您将其添加到页面的什么位置？
这能回答你的问题吗？ info on javascript document.createElement()
既然您已经解决了最初的问题，请将相关答案标记为解决方案并提出新问题。不要将你原来的问题变成一个新问题。

标签： javascript html dom google-chrome-extension

【解决方案1】：

Document.createElement 方法创建一个Element 并将其存储在变量中，它不会插入到 DOM 中，您必须手动执行，使用以下附加方法：

ParentNode.append：在父节点的最后一个子节点之后插入节点。

请注意，当您创建自定义 HTML 标记时，您将获得一个 HTMLUnknownElement，它派生自 HTMLElement 接口并且不实现任何其他属性或方法。

我建议你使用Template tag来创建你要插入的节点，让你的代码更具可读性，例如：

function htmlToElement(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.firstChild;
}

你可以这样使用：

var myContent =  htmlToElement('<div class="my-class"><div class="mychild-class"></div><span id="my-span"></span></div>');
//Getting an element inside the created node
var mySpan = myContent.querySelector("#my-span");

【讨论】：