Question

我有一个div标记，其中包含divstudent类，我们可以说这是div1标记。现在，我想在此div2标记下方动态创建另一个div标记div1，而不是在div1标记内。我想使用javascript在div1标记之外创建。我怎么能这样做？

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

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

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

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

Answer 1

尝试这样的事情：

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

Answer 2

由于此标记为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>

Answer 3

有很多方法可以做到这一点。方法的一个显着区别是，如果您选择首先使用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>中，因此在此答案的示例中可以看到一些内容。

＆＃13;

//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');

＆＃13;

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

＆＃13;

<强> jQuery的：
虽然您的问题被标记为jQuery，但您发布的评论意味着您只是使用JavaScript。因此，我不确定jQuery是否适合你。

如果您想使用jQuery，则可以使用.after()添加<div>元素。然后，您可以使用.removeAttr()删除class="divstudent"。

＆＃13;

// 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');

＆＃13;

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

＆＃13;

Answer 4

myRemoveHelper

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

Answer 5

你创建一个新的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);

在另一个div标签下添加div标签

5 个答案: