將div標籤添加到另一個div標籤下方

-2

我有一個div標籤，其中有類divstudent，可以說這是div1標籤。現在我想在div1標籤以下動態創建另一個div標籤div2，而不是在div1標籤內。我想使用javascript在div1標籤之外創建。我怎樣才能做到這一點？將div標籤添加到另一個div標籤下方

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

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

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

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

來源

2016-09-28 adikitty CB

只是一個側面說明，HTML註釋表示'' –

幾乎同樣的問題< - - 這個樣子！>： http://stackoverflow.com/questions/ 4793604 /如何在JavaScript中不使用插入後使用庫 –

你有什麼嘗試？順便說一句：如果你給它一個唯一的'id'，除了'class'之外，引用一個特定的元素會容易得多。 – Makyen

嘗試這樣：

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

來源

2016-09-28 19:34:24

-1

您創建一個新的div（在js中），然後在目標div之後添加您的newDiv。沿線的香草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);

來源

2016-09-28 19:26:51 Carl

哎呀，你的權利，是直接寫入框中：p已修復它 – Carl

'insertAfter'？你試過了嗎？ – Makyen

它不適合我，我正在使用javacript，我認爲我shd寫插入功能 –

由於這是標記jquery，只需用.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>

來源

2016-09-28 19:39:05 dave

有很多方法去做這個。方法的一個顯着區別是，如果您選擇先使用Document.createElement()創建元素，然後插入元素，或者使用允許插入HTML文本的方法之一在一個步驟中創建和插入元素。

因爲它更簡單但不一定更好，下面的示例顯示了使用允許將HTML文本插入到DOM中的方法在一個步驟中創建和插入兩個<div>元素。

的JavaScript：
一種是使用insertAdjacentHTML()並指定它要插入您所使用的元素afterend。

document.querySelector()用於查找第一個<div class="divstudent">。然後使用insertAdjacentHTML()添加附加的<div>元素。然後使用Element.removeAttribute()刪除class="divstudent"。注意：如果我們只是想將class設置爲不同的值，即使''，那麼我們也可以使用Element.className。

注：在這個答案，文字識別每個<div>已被添加到<div>太有東西在這個答案的例子可見。

//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：
雖然你的問題是標籤的jQuery，您發佈的評論你只是使用JavaScript暗示。因此，我不確定jQuery是否適合你。

如果您想使用jQuery，那麼您可以使用.after()來添加<div>元素。然後您可以使用.removeAttr()刪除class="divstudent"。

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

來源

2016-09-28 19:43:00 Makyen

將div標籤添加到另一個div標籤下方

回答

相關問題