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 (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 プロパティを確認することをお勧めします。または、スパンに id を指定して getElementById を使用するだけでもよいでしょう (ただし、すでに考えたことがあるはずです)。

  2. また、@salexch が正しく指摘したように、DOM メソッドが getElementsByClassName および getElementsByTagName のように要素のグループ (HTMLCollection) を返す場合、インデックス (containerElem[0]) を使用してコレクション内の個々の要素にアクセスする必要があります。

「上記の修正を試みましたが、Uncaught TypeError: Cannot read property 'parentNode' of undefined」というエラーが表示されます

これは、DOM メソッドによって返されるコレクションが空であることを意味します。getElementsByClassName が呼び出された時点で、クラス「likes」のスパンが DOM に存在することは確かですか?

残りは問題ないようです。解決策がすぐに見つかることを願っています。

于 2013-01-14T10:09:31.747 に答える