Javascript: hinzufügen von "div" - element direkt nach dem 2. generische "p" - tag (w/o ID noch Class"), innerhalb jedes post-oder content-Bereich?

Wie gehe ich über einfügen einer benutzerdefinierten "div" - element, das erscheint direkt nach dem 2. generische (w/o-hinzufügen-ID oder eine Klasse) "p" - Knoten/tag im Abschnitt den Inhalt jeder Seiten möchte ich Sie in, durch die Verwendung von JavaScript?

Beispiel:

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

Die Ausgabe:

<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>
  • querySelectorAll mit nth-child, dann nimm element und insertBefore nächsten Geschwister.
InformationsquelleAutor netizen0911 | 2013-06-16
  1. 7

    Ihre 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>

    Und da Sie nicht erwähnt, jQuery werde ich Ihnen eine Antwort mit plain 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++;

    }

    Hier ist eine funktionierende demo

    Beachten Sie, dass es eine Globale var so ordnen Sie verschiedene ID ' s, um Ihre dynamisch erstellten Elementen.

    Bearbeiten

    Als pro user-Wunsch, den folgenden code hinzufügen, dass der Inhalt Last :

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

    Hier ist die aktualisierte 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++;

}

    Hier ist der neue demo

    Beachten Sie, dass der appender variable nicht mehr benötigt werden ich bin verlassen, sollten Sie die Seriendruck-Funktionalität.

    • Dies funktioniert gut, aber das, was ich will, ist die Funktion automatisch aufgerufen, sobald die Seite lädt. Wie man den code optimieren, für, die? Danke!
    • kein problem 🙂 siehe den aktualisierten code, Es wird legen Sie die Linien auf laden jetzt, auch wenn Sie diese Antwort hilfreich, bitte beachten Sie upvoting und zu akzeptieren, so ist es reamins für andere Nutzer hilfreich 🙂
    • Genial! Vielen Dank, Mann! Abstimmung bis jetzt. Eine Letzte Frage und zwar... Mit der "textnode" - variable kann ich mir das schreiben html-tags innerhalb von es oder einfach nur mit den Texten?
    • kein problem! Ich bin froh, dass es nützlich war!, auf der createTextNode Methode verwenden plain text, wenn Sie möchten, erstellen Sie Elemente verwenden createElement dann fügen Sie den text in das erstellte element, genau wie wir, mit div
    • Hmmm... Das scheint hart zu mir. Ich bin mir nicht sicher, ob es der, den ich brauche für einen bestimmten Zweck. Was ich versucht habe zu erreichen, ist das einfügen eines div-tag mit der Möglichkeit zum schreiben von html-innerhalb der it und kann Sie enthalten nur wenige Elemente. Hier ist, was ich in dem div-tag: <div> <form> <input name="name" type="text"/> <input name="email" type="email"/> <input name="submit" type="submit" value="Senden"/> </form> </div> Kann es sein getan?
    • Ja, es kann getan werden, ich habe eine neue Geige, check this out jsfiddle.net/rvaldez/r7xNm
    • Das ist perfekt! Vielen Dank. Prost!
    • Sie sind sehr willkommen netizen 🙂

    InformationsquelleAutor isJustMe
  2. 1

    Ich denke, der einfachste Weg ist es, wie diese,

    var node = document.createElement("div");
var textnode = document.createTextNode('Content here...');
node.appendChild(textnode);
node.id = 'custom-div';
var referencenode = document.getElementById('main-content').children[1];
referencenode.parentNode.insertBefore(node, referencenode.nextSibling);

    den code "referencenode.parentNode.insertBefore(node, referencenode.nextSibling); fügt den Knoten in nach Ihrer ausgewählten element,

    hier ist die DEMO

    InformationsquelleAutor Esgi Dendyanri
Schreibe einen Kommentar