prepend an created element at a specific place

Question

I'm pretty new to coding (januari,2021) and with a lot of online searching I'm able to get pretty far but at this point I'm pretty stuck.

setTimeout(function(){

var supbtn = document.createElement("BUTTON");
supbtn.innerHTML = "Support";
supbtn.className = "Support-logout-class";
supbtn.onclick = function(){window.open("LinkToSite","_blank")}; 

document.body.appendChild(supbtn);

}, 2000);

There is a default wordpress plugin that the company that I work for uses, and as we are in the proces of building a custom site for this use case we want to try and upgrade the current. (With a lot of succes so far)

Basically there is a default code and I want to add the above stated "button" element at a specific place, currently it's adding inside the "body" and that works perfect!

The code where I want to place it:

I want the generated button to appear before: class="wpws-webinar-summary-logout" (why before?, because if I'm right the code "" isn't set, as in it can change between pages. And I know for sure "wpws-webinar-summary-logout" isn't going to change)

But I just can't seem to find the right search term for this, and when I think I'm close I don't quite seem to understand it yet.

Any, tips, tricks, examples, someone can give to me?

Many thanks in advance! Gr. Ian

user_9131961 · Answer

You can use insertBefore() to inject an element before another element, like this for example:

setTimeout(function(){

  // Create button element
  var supbtn = document.createElement("BUTTON");
  supbtn.innerHTML = "Support";
  supbtn.className = "Support-logout-class";
  supbtn.onclick = function(){window.open("LinkToSite","_blank")};

  // Find the element that we'll use as reference to inject our button
  var webinar_summary_logout = document.querySelector('.wpws-webinar-summary-logout');
  
  // Get the parent element
  var parentDiv = webinar_summary_logout.parentNode;
  
  // Inject the button before our referenced element
  parentDiv.insertBefore(supbtn, webinar_summary_logout);

}, 2000);

user_1430810 · Answer

I usually use insertAdjacentElement to have fine control on where to insert elements (there are some shortcuts but I try to always use that one for consistency)

var supbtn = document.createElement("BUTTON");

document.querySelector('.wpws-webinar-summary-logout').insertAdjacentElement('beforebegin', supbtn)

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

user_14573516 · Answer

Select that element and then i assume you have selected it and gave a name like const node = document.queryselector(“something”) node.before(paste element here) Or node.after(element here)

user_4955304 · Answer

So not sure I'm following 100%. You want to add a programmatically-generated button in div.wpws-webinar-summary-content and before div.wpws-webinar-summary-logout (as the second child of the parent element)?

Several ways to do this:

https://developer.mozilla.org/en-US/docs/Web/API/Element <- check out the Web API - getting familiar with Element (and DOM) traversal within JS is super helpful. Lots of specific ways to implement this by modifying children, innerHTML (not recommended), etc. (Edit: several others answered while I was typing this - some of the other suggestions are also documented there including: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement!)
Another approach involves adding a placeholder element where you want along with a unique identifier (ID attribute). You can alternately hide (display: none) or otherwise append the desired button into this placeholder element. Assuming your CSS is correct, the placeholder element shouldn't cause too many problems with your surrounding elements (don't give it the same classes, etc.).

Cheers!

prepend an created element at a specific place

4 Answers