Question 166558 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress prepend a created element at a specific place?

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:

<div class="wpws-webinar-summary-content sc-iBEsjs sJWcq">
<div class="sc-fZwumE cyVGPD"></div>
<div class="wpws-webinar-summary-logout sc-gmeYpB fOXvtE">
<svg class="wpws-33" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" title="Verlaat het webinar"><path fill="none" d="M0 0h24v24H0z"></path>
<path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
</div>
</div>

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

Tags:

4

Answers


  1. 0

    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)

    Login or Signup to reply.
  2. 0

    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);
    <div class="wpws-webinar-summary-content sc-iBEsjs sJWcq">
  <div class="sc-fZwumE cyVGPD"></div>

  <div class="wpws-webinar-summary-logout sc-gmeYpB fOXvtE">
    <svg class="wpws-33" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" title="Verlaat het webinar"><path fill="none" d="M0 0h24v24H0z"></path>
      <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
    </svg>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    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:

    1. 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!)
    2. 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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search