19

私は次の構造を持っています：

<div class="parent">
  <div id="child1">Content here</div>
  <div class="child2">Content here</div>
</div>

オンロード時に、次のようにすべての親の子を保持する「ホルダー」divを含めたい:

<div class="parent">
  <div id="holder">
    <div id="child1">Content here</div>
    <div class="child2">Content here</div>
  </div>
</div>

「child1」IDのみを知っている場合、それ自体と兄弟の周りにホルダーdivを追加するにはどうすればよいですか?

考慮事項

  • 「child1」ID が唯一の既知の識別子です。
  • クラス「parent」と「child2」は動的な名前であり、変更されるため、識別子として使用できません。
  • バニラ JavaScript である必要があります。

考え？

4

3 に答える 3

44

これは JavaScript (jQuery ではなく) でなければならず、id でのみ child1 を識別できるため、次のような粗雑なことを行うことができます。

var child1 = document.getElementById("child1"),
    parent = child1.parentNode,
    contents = parent.innerHTML ;
    parent.innerHTML = '<div id="holder">' + contents + '</div>';

お役に立てれば...

于 2012-07-05T12:00:32.923 に答える
3

彼は jQuery はないと言いました。これは宿題のように聞こえますが、

var el = document.getElementById('child1');
var parent = el.parentNode;
parent.innerHTML = '<div id="holder">' + parent.innerHTML + '</div>';
于 2012-07-05T12:05:58.727 に答える