Hinzufügen div-Tag unter einem anderen div-Tag

-2

Ich habe eine div Tag mit Klasse divstudent, lassen Sie uns sagen, das ist div1 Tag. Jetzt möchte ich ein weiteres div-Tag div2 dynamisch unter diesem div1 Tag erstellen, nicht innerhalb des div1 Tags. Ich möchte außerhalb von div1 Tag mit Javascript erstellen. Wie kann ich das machen?Hinzufügen div-Tag unter einem anderen div-Tag

"div1" 
<div class="divstudent"></div> 

<!-- i want to be like this --> 
<!-- "div1" --> 
<div></div> 

<!-- "div2" --> 
<div></div> 

<!-- "div3" --> 
<div></div>

Quelle

2016-09-28 adikitty CB

nur eine Randnotiz, HTML-Kommentare bezeichnet '' –

So ziemlich die gleiche Frage <- - So!>: http://stackoverflow.com/questions/ 4793604/how-to-do-insert-nach-in-javascript-ohne-using-a-library –

Was hast du probiert? BTW: Es ist ein bisschen einfacher, ein bestimmtes Element zu referenzieren, wenn Sie ihm zusätzlich zu einer "Klasse" eine eindeutige "ID" geben. – Makyen

versuchen, etwas wie folgt aus:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Divs creator</title> 

    <script type="text/javascript"> 
     window.onload = function() { 
      var divReference = document.querySelector('.divstudent'); 
      var divCounter = 0; 
      divReference.addEventListener('click', function() { 
       var divToCreate = document.createElement('div'); 
       divToCreate.innerHTML = ++divCounter; 
       divReference.parentNode.appendChild(divToCreate); 
      }, false); 
     } 
    </script> 
</head> 
<body> 
    <div class="divstudent"> 
     <input type="button" value="add div below divstudent"> 
    </div> 

</body> 
</html>

Quelle

2016-09-28 19:34:24

-1

Sie erstellen ein neues div (in js), dann fügen Sie einfach Ihr newDiv, nach dem Ziel div. Etwas nach dem Vorbild der in Vanille js:

// Create your new div 
var newDiv = document.createElement("div"); 
newDiv.innerText = "New Div!"; 
// Grab the div you want to insert your new div after 
var target_div = document.querySelector("div.divstudent"); 
// Insert newDiv after target_div (before the thing after it) 
target_div.parentNode.insertBefore(newDiv, target_div.nextSibling);

Quelle

2016-09-28 19:26:51 Carl

Whoops, Ihr Recht, war gerade in der Box Codierung: p habe es behoben – Carl

'insertAfter'? Hast du es versucht? – Makyen

es funktioniert nicht für mich, ich benutze javascript, ich denke, ich shd schreiben funktion für insertAfter –

Da dies jquery markiert, benutzen Sie einfach .after()

$(function() { 
 
    $("div").eq(0).after("<div>This is div 2</div>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    This is div 1 
 
</div>

Quelle

2016-09-28 19:39:05 dave

Es gibt viele Wege um dies zu tun. Ein wichtiger Unterschied in den Methoden besteht darin, dass Sie zuerst die Elemente mit Document.createElement() erstellen und dann die Elemente einfügen oder die Elemente in einem Schritt erstellen und einfügen, indem Sie eine der Methoden zum Einfügen von HTML-Text verwenden.

Da es einfacher, aber nicht unbedingt besser ist, zeigen die folgenden Beispiele das Erstellen und Einfügen der beiden <div> Elemente in einem einzigen Schritt mit Methoden zum Einfügen von HTML-Text in das DOM.

JavaScript:
One ist insertAdjacentHTML() zu verwenden und angeben, dass es afterend des Elements eingefügt werden soll Sie verwenden.

document.querySelector() wird verwendet, um die erste <div class="divstudent"> zu finden. Dann wird insertAdjacentHTML() verwendet, um die zusätzlichen Elemente <div> hinzuzufügen. Element.removeAttribute() wird dann verwendet, um die class="divstudent" zu entfernen. Hinweis: Wenn wir nur die class auf etwas anderes setzen wollten, sogar '', dann hätten wir Element.className verwenden können.

HINWEIS: In dieser Antwort Text jeden <div> Identifizierung hat die <div> s hinzugefügt, so etwas sichtbar in den Beispielen in dieser Antwort gibt.

//Find the first <div class="divstudent"> in the document 
 
var studentDiv = document.querySelector('div.divstudent'); 
 
//Insert two new <div> elements. 
 
studentDiv.insertAdjacentHTML('afterend','<div>2</div><div>3</div>'); 
 
//Remove the class="divstudent" 
 
studentDiv.removeAttribute('class');

<div class="divstudent">1</div>

jQuery:
Während Ihre Frage jQuery markiert ist, bedeutet, ein Kommentar, den Sie geschrieben Sie JavaScript nur verwenden. Daher bin ich mir nicht sicher, ob jQuery für Sie arbeitet. Wenn Sie jQuery verwenden möchten, können Sie .after() verwenden, um die Elemente <div> hinzuzufügen. Sie können dann .removeAttr() verwenden, um die class="divstudent" zu entfernen.

// Get the first <div class="divstudent">. 
 
// Store it in a variable so we only walk the DOM once. 
 
var $studentDiv = $('div.divstudent').eq(0); 
 
//Add the two new <div> elements 
 
$studentDiv.after('<div>2</div><div>3</div>'); 
 
//Remove the class="divstudent" 
 
$studentDiv.removeAttr('class');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="divstudent">1</div>

Quelle

2016-09-28 19:43:00 Makyen

Hinzufügen div-Tag unter einem anderen div-Tag

Antwort

Verwandte Themen