Question

我的目标是创建一个元素作为现有元素的占位符。出于样式目的，我需要在另一个元素后面移动元素（位置：绝对不是一个好的解决方案），所以我可以设置位置动态。

我的问题是标记是由javascript生成的，我唯一的选择是通过javascript调整它。这是我需要覆盖的第三方小部件。

当前加价：

<li class="...">

  <a class="time" href="...." >
    <time pubdate="" class="...">...</time>
  </a>

  <div class="...">
    ...
  </div>

  <div class="...">
    ...
  </div>

  <div class="bottom-wrapper">
    <span class="stats-container">
      <span class="stats">
        <span class="likes">    
          ...
        </span>
        <span class="favorites">   
          ...
        </span>
      </span>
    </span>
  </div>

我想在a.time之后将span.likes移到新的范围内。

目标：

<li class="...">

  <div class="...">
    ...
  </div>

  <div class="...">
    ...
  </div>

  <div class="bottom-wrapper">
    <span class="stats-container">
      <span class="stats">
        <span class="likes">    
          ...
        </span>
        <span class="new-span">
          <a class="time" href="...." >
            <time pubdate="" class="...">...</time>
          </a>
        </span>
        <span class="favorites">   
          ...
        </span>
      </span>
    </span>
  </div>
</li>

出于某种原因，我需要在原生javascript（No Jquery）中进行。

我的代码：

// Create a new, plain <span> element
var createElem = document.createElement('span');

// Get a reference to the element, before we want to insert the element
var containerElem = document.getElementsByClassName("likes");

// Get a reference to the parent element
var parentDiv = containerElem.parentNode;

// Insert the new element into the DOM after containerElem
parentDiv.insertBefore(createElem, containerElem.nextSibling);

但是，上面的代码会抛出错误（请参阅下文）：

Uncaught TypeError: Cannot call method 'insertBefore' of null 
Uncaught TypeError: Cannot call method 'insertBefore' of undefined

知道我怎么能这样做吗？感谢

编辑：我也有多个LI。所以我需要遍历这个脚本中的所有LI。

Answer 1

containerElem是一个数组：

var parentDiv = containerElem[0].parentNode;

Answer 2

getElementsByClassName 不是一种安全的跨浏览器DOM方法。它不适用于IE 8及以下版本。如果您需要跨浏览器支持，那么使用getElementsByTagName（'span'）并检查.className属性将是更好的选择。或者更好的是，只需给出一个id并使用getElementById（但我确信你已经想到了这个想法）。
另外，正如@salexch正确指出的那样，如果DOM方法返回一组元素（HTMLCollection）作为getElementsByClassName和getElementsByTagName，那么你必须使用索引（containerElem [0]）来访问其中的各个元素收藏品。

“我上面尝试过你的修正，但我得到了这个错误未捕获的TypeError：无法读取未定义的属性'parentNode'”

这意味着DOM方法返回的集合为空。你确定调用getElementsByClassName时DOM中是否存在类“喜欢”的跨度？

其余的看起来很好。希望你能尽快找到解决方案。

如何在本机Javascript中创建元素并将现有元素移入其中？

2 个答案: