在特定位置添加创建的元素

如何解决在特定位置添加创建的元素

我对编码非常陌生（2021 年 1 月），通过大量的在线搜索，我可以走得很远，但在这一点上我很困惑。

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

我工作的公司使用了一个默认的 wordpress 插件，由于我们正在为此用例构建自定义站点，因此我们想尝试升级当前插件。 （到目前为止取得了很多成功）

基本上有一个默认代码，我想在特定位置添加上述“按钮”元素，目前它正在添加到“主体”内部，效果很好！

我想放置的代码：

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

我希望生成的按钮出现在：class="wpws-webinar-summary-logout" （为什么以前？，因为如果我是对的，代码“”没有设置，因为它可以在页面之间改变。我确定“wpws-webinar-summary-logout”不会改变）

但我似乎无法为此找到正确的搜索词， 当我认为我很接近时，我似乎还不太明白。

有人可以给我任何提示、技巧、例子吗？

非常感谢！ 格。伊恩

解决方法

您可以使用 insertBefore() 在另一个元素之前注入一个元素，例如：

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>

,

我通常使用 insertAdjacentElement 来精确控制插入元素的位置（有一些快捷方式，但我尽量始终使用该快捷方式以保持一致性）

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

,

选择该元素，然后我假设您已选择它并命名为 const node = document.queryselector(“something”) node.before(paste element here) Or node.after(element here)

,

所以不确定我是否 100% 关注。您想在 div.wpws-webinar-summary-content 中和 div.wpws-webinar-summary-logout 之前（作为父元素的第二个子元素）添加一个以编程方式生成的按钮？

执行此操作的几种方法：

1. https://developer.mozilla.org/en-US/docs/Web/API/Element children、innerHTML（不推荐）等（编辑：其他几个人在我打字时回答了这个问题 - 其他一些那里还记录了建议，包括：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement!)
2. 另一种方法是在您需要的位置添加占位符元素以及唯一标识符（ID 属性）。您可以交替隐藏 (display: none) 或以其他方式将所需按钮附加到此占位符元素中。假设您的 CSS 是正确的，占位符元素不应该对您周围的元素造成太多问题（不要给它相同的类等）。

干杯！