javascript - 在 div 之间移动 html 而不会干扰 Wordpress 表单生成代码中的底部 div

Question

我有一些无法更改的 WP Members 插件生成的 html，并且在样式设置方面遇到问题。

<div class="button_div">
    <input name="rememberme" type="checkbox" id="rememberme" value="forever">
        "&nbsp;Remember Me&nbsp;&nbsp;"
    <input type="submit" name="submit" value="LogIn" class="buttons">
</div> 

我需要将第一个输入复选框和“记住我”文本移到左侧，但只能单独针对复选框，或使用 Sass/CSS 定位整个 button_div。有没有一种方法可以使用 Javascript 或其他技术在不移动提交按钮的情况下移动复选框和记住我的文本？

Answer 1

由于您无法编辑原始 HTML，我已经更新了我的答案。我提出的解决方案使用 javascript 来覆盖原始 HTML，您可以根据需要设置样式。

试试这个:

<!-- Your original HTML. -->

<div class="button_div">
  <input name="rememberme" type="checkbox" id="rememberme" value="forever">"&nbsp;Remember Me&nbsp;&nbsp;"
  <input type="submit" name="submit" value="LogIn" class="buttons">
</div>

<!-- A script that replaces the button_div contents with HTML that you should be able to work with. -->
<script>
  divs = document.getElementsByClassName('button_div');

  [].slice.call(divs).forEach(function(div) {
    div.innerHTML = '<div id="container"><div class="checkbox_div"><input name="rememberme" type="checkbox" id="rememberme" value="forever">"&nbsp;Remember Me&nbsp;&nbsp;"</div><div class="button_div"><input type="submit" name="submit" value="LogIn" class="buttons"></div></div>';
  });
</script>

<!-- An example of how you might style your elements. -->
<style type="text/css">
  .checkbox_div {
    position: relative;
    top: 100px;
    left: 100px;
  }
  .button_div {
    position: relative;
    left: 20px;
  }

希望这对您有所帮助。

*更新:对于这篇文章的 future 读者，我想弄清楚这是如何工作的——因为这看起来有点神秘。 (了解这只是解决此问题的一个示例。)

• 首先，我们从 getElementsByClassName(class) 中得到一个类数组对象，并将其分配给 div。
• 接下来我们从 div 创建一个数组([] 只是新数组的简写)，这样我们就可以使用 forEach 进行循环。 (我们必须这样做，因为 getElementsByClassName() 返回一个“类数组”对象而不是实际数组。也就是说，div 没有可用的 forEach 方法。)
• 对于新数组中的每个元素，我们更新 HTML。

这里有一些其他的引用资料:

• > how does Array.prototype.slice.call() work?
• > Explanation of [].slice.call in javascript?