0

我的目标是创建一个元素来充当现有元素的占位符。出于样式目的，我需要将元素移动到另一个元素之后（位置：绝对不是一个好的解决方案），以便我可以设置动态位置。

我的问题是标记是由 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。

4

2 回答 2

4

containerElem是一个数组：

var parentDiv = containerElem[0].parentNode;
于 2013-01-14T09:32:34.003 回答
1

  1. getElementsByClassName不是安全的跨浏览器 DOM 方法。它不适用于 IE 8 及更低版本。如果您需要跨浏览器支持，那么使用 getElementsByTagName('span') 并检查 .className 属性将是一个更好的选择。或者更好的是，只需给 span 一个 id 并使用 getElementById （但我相信你一定已经想到了这个想法）。

  2. 此外，正如@salexch 正确指出的那样，如果 DOM 方法返回一组元素 (HTMLCollection)，如 getElementsByClassName 和 getElementsByTagName 所做的那样，那么您必须使用索引 (containerElem[0]) 来访问集合中的各个元素。

“我在上面尝试了您的更正，但我收到了这个错误 Uncaught TypeError: Cannot read property 'parentNode' of undefined”

这意味着您的 DOM 方法返回的集合是空的。您确定在调用 getElementsByClassName 时 DOM 中存在类“likes”的跨度吗？

其余的看起来不错。希望您能尽快找到解决方案。

于 2013-01-14T10:09:31.747 回答