Question

我想在HTML中的 SecondDiv 之后动态添加此警告div。请建议我们如何在jquery中实现这一目标。

HTML：

<div class="panel panel-default">
    <div class="panel-heading">

    </div>
    <div class="panel-body">
        <div class="table-responsive" id="FirstDiv">

        </div>
        <hr/>
        <div class="table-responsive" id="SecondDiv">

        </div>
        <hr/>
        <div class="table-responsive" id="ThirdDiv">

        </div>
    </div>
</div>

警告DIV：

<div class="note note-warning"> 
    <div class="block-warning"> 
        <h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4>
        <p>Warning </p>
    </div>
</div>

Answer 1

根据javascript，您可以使用Element.insertAdjacentHTML(position, text)。

一个建议是对警告div使用Id：

var d1 = document.getElementById('SecondDiv'), // target element
  wd = document.getElementsByClassName('note')[0].cloneNode(true); // get a new copy of warning div

wd.id = 'warningDiv'; // put an id to this div

d1.insertAdjacentHTML('afterend', wd.outerHTML); // place the div after target div
document.getElementById('warningDiv').style.display = 'block'; // show the div if hidden

.note{display:none;}

<div class="note note-warning">
  <h1>Warning</h1>
</div>
<div class="table-responsive" id="SecondDiv">
  SecondDiv
</div>

使用jQuery，您可以使用.after()：

var d1 = $('#SecondDiv');
var wd = $('.note');
d1.after(wd);
wd.show();

.note {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="note note-warning">
  <h1>Warning</h1>
</div>
<div class="table-responsive" id="SecondDiv">
  SecondDiv
</div>

Answer 2

假设它是在页面加载。你可以这样做

$(function() {
    $('.note.note-warning').appendTo($('#SecondDiv'));    
});

Answer 3

您可以像使用after函数一样执行此操作。

$('#SecondDiv').after('<div class="note note-warning"><div class="block-warning"><h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4><p>Warning </p></div></div>');

Answer 4

这是你需要的吗？

   document.getElementById('SecondDiv').appendChild(document.getElementById('warnin‌gDiv');.

我会在你的警告div中添加一个ID来添加这种方式。

刚刚注意到你说了JQUERY。

$('#warningDiv').appendTo($('#SecondDiv');

Answer 5

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
    .selected{
        background-color : green;
    }
    </style>
<script>





    $(document).ready(function () {

        szDiv = '<div class="note note-warning"> <div class="block-warning"> <h4 class="block"> <i class="demo-icon icon-attention-1 fa"></i> Warning! Some Header Goes Here</h4><p>Warning </p></div></div>';


        $(szDiv).insertAfter("#SecondDiv")
    });




</script>
</head>
<body>
   <div class="panel panel-default">
        <div class="panel-heading">

        </div>

        <div class="panel-body">
            <div class="table-responsive" id="FirstDiv">

            </div>

            <hr/>

            <div class="table-responsive" id="SecondDiv">

            </div>

            <hr/>

            <div class="table-responsive" id="ThirdDiv">

            </div>

        </div>

</div>
</body>
</html>

Answer 6

    enter code here
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
<script>
  $(document).ready(function(){
    $("#buttonid").click(function(){
        $("#firstid").clone().appendTo("#secondid");

        return false;

    });
</script>
<body>
<div id="firstid">
<div id="secondid">
any thing in this area will be add
</div>
</div>
<input type"submint" id="buttonid">
</body>

jquery - 动态地为子项添加div

6 个答案: