0

JavaScript を使用して、2 番目の一般的な (ID またはクラスを追加しない) 「p」ノード/タグの直後に表示されるカスタム「div」要素を、すべてのページのコンテンツ セクションに挿入するにはどうすればよいですか? ?

例えば：

<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <p>3rd paragraph content.....</p>
</div>

出力：

<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <div id="custom-div">Content here...</div>
  <p>3rd paragraph content.....</p>
</div>
4

2 に答える 2

7

あなたのhtmlを考えると：

<input type='button' onclick='addText();' value='Add To List'/>
<input type='text' id='input'/>
<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <p>3rd paragraph content.....</p>
</div>

そして、jQueryについて言及しなかったので、プレーンなJavascriptで回答を提供します：

var appender=1;
    function addText(){
        var parentDiv = document.getElementById('main-content');
        var input = document.getElementById('input').value;    
        var node = document.createElement("DIV");
        var textnode = document.createTextNode(input);
        node.appendChild(textnode);     
        node.id = 'custom-div_' + appender;
        var child = parentDiv.children[2];
        parentDiv.insertBefore(node, child);
        appender++;

    }

これが実際のデモです

var動的に作成された要素に異なる ID を割り当てることができるように、グローバルがあることに注意してください。

編集

ユーザーの要求に従って、次のコードはそのコンテンツをロード時に追加します。

<body onload="addText()">
<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <p>3rd paragraph content.....</p>
</div>
</body>

更新された Javascript は次のとおりです。

var appender=1;
function addText(){
    var parentDiv = document.getElementById('main-content');      
    var node = document.createElement("DIV");
    var textnode = document.createTextNode("This was added dinamically");
    node.appendChild(textnode);     
    node.id = 'custom-div_' + appender;
    var child = parentDiv.children[2];
    parentDiv.insertBefore(node, child);
    appender++;

}

新しいデモはこちら

変数アペンダーは不要になったことに注意してください。機能をマージしたい場合に備えて残します。

于 2013-06-16T02:24:05.883 に答える