0

Webページの構造は次のようになります:-

<div id='abc'>
  <div class='a'>Some contents here </div>
  <div class='b'>Some other contents< </div>
</div>

私の目的は、上記の構造のクラス a の後にこれを追加することです。

<div class='a'>Some other contents here </div>

最終的な構造は次のようになります:-

  <div id='abc'>
      <div class='a'>Some contents here </div>
      <div class='a'>Some other contents here </div>
      <div class='b'>Some other contents< </div>
    </div>

DOM プロパティを使用してこれを行うより良い方法はありますか。コンテンツを解析して更新する単純な方法を考えていました。

疑問を質問する際に不明な点がある場合は、コメントしてください。

4

4 に答える 4

1

目的の要素を作成し、目的の属性、子、innerHTMLなどを指定して、次のように追加します。

var parent = document.getElementById('abc'),
    ele = document.createElement('div');

ele.setAttribute('class', 'a');
ele.innerHTML = "Some other contents here";

parent.appendChild(ele);​

フィドル

あなたは怠惰でのを設定することができますinnerHTMLが#abc、私の意見では、この方法はより柔軟です。

于 2012-12-06T05:05:23.843 に答える
1

これがあなたが探しているものだと思いますhttp://jsfiddle.net/cExRS/
コードはこれです

element = document.getElementById('abc');
element.innerHTML = "<div class='a'>Some other contents here </div>" + element.innerHTML;

あなたは本当にjqueryを試してみるべきです、それは物事をずっと簡単にします

于 2012-12-06T05:06:59.050 に答える
1

好きな人は、プリペンドの答えがあることを指摘しました.JSに 兄弟ノードを挿入し、通常のJavaScriptでプリペンドとアペンドを実装するにはどうすればよいですか?

<html>
<head>
<script type="text/javascript">
function add(myClass) {
    var root = document.getElementById('abc');
    var last = null;
    for (var i = 0; i < root.childNodes.length; i++) {
        var child = root.childNodes[i];
        if (!child.className) continue;        
        var pat = new RegExp(myClass,'g');    
        var m = pat.exec(child.className);      
        if (!m) {
          if (!last) continue;
            var div = document.createElement('div');
            div.appendChild(document.createTextNode('After A content'));    
            root.insertBefore(div, last.nextSibling);        
            break;            
        }
        last = child;                     
    }
}
</script>
</head>
<body>
<div id='abc'>
  <div class='d'>Some contents here </div>
  <div class='b'>Some other contents </div>
  <div class='a'>Content A</div>
  <div class='a'>Content A1</div>
  <div class='a'>Content A2</div>
  <div class='a'>Content A3</div>
  <div class='b'>Some other contents </div>
</div>
<a href="#" onclick="add('a')">Add div</a>
</body>
</html>
于 2012-12-06T05:45:49.423 に答える
0

この質問は重複しています:s

通常の JavaScript でプリペンドとアペンドを実装するにはどうすればよいですか?

前付けといいます

于 2012-12-06T05:02:35.040 に答える