Trying to create custom HTML nodes with javascript for page injection

Question

Currently I am trying to inject some HTML onto Youtube's Page with a chrome extension that I am working on. They use custom HTML on their page and so I am creating custom DOM Nodes like theirs.

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

However, when I execute the above node I do not see my injected HTML anywhere on the page. To bug test this, I instead switched out the tag name for a basic div tag and it worked then.

For reference, I was looking at this other stackoverflow question to accomplish my goal. Thanks for the help!

Edit: Thanks for all the responses! So after reloading the extension a couple of times, I can actually see my custom HTML injected in the page via the console.

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);

Now my main issue that is I only see the channelSection and content nodes on the page. Am I appending the DOM nodes incorrectly possibly?

You're creating the element...where are you adding it to your page? — devlin carnate
– devlin carnate, Commented Sep 21, 2020 at 19:52
Does this answer your question? info on javascript document.createElement() — devlin carnate
– devlin carnate, Commented Sep 21, 2020 at 19:53
Now that you solved your initial question, mark the relevant answer as a solution and ask a new question. Don't transmogrify your original question into a new one. — woxxom
– woxxom, Commented Sep 22, 2020 at 4:26

Bruno.S · Accepted Answer · 2020-09-21 20:22:19Z

Document.createElement method creates a Element and stores it in the variable, it is not inserted into the DOM, you have to do it manually, using appending methods like:

ParentNode.append: inserts the Node after the last child of the Parent Node.

Note that when you create a custom HTML Tag, you will get a HTMLUnknownElement which derives from the HTMLElement interface and does not implement any additional properties or methods.

I recommend you to use the Template tag to create the node you want to insert to make your code more readable, example:

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

You can use like this:

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");

Collectives™ on Stack Overflow

Trying to create custom HTML nodes with javascript for page injection

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related