jQuery-将div动态添加到子级

Question

I want to add this warning div dynamically after the SecondDiv in my HTML. 我想在HTML中的SecondDiv之后动态添加此警告div。 Please suggest how simply we can achieve this in jquery. 请建议我们如何简单地在jquery中实现这一目标。

HTML: 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>

WARNING 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

As per javascript you can use Element.insertAdjacentHTML(position, text) . 按照javascript，您可以使用Element.insertAdjacentHTML（position，text） 。

One suggestion is to use an Id to the warning div: 一个建议是对警告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>

With jQuery, you can use .after() : 使用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

Assumed that it is on page load. 假设它正在页面加载中。 You can do it like this 你可以这样

$(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

Is this what you need ? 这是您需要的吗？

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

I'd put an ID in your warning div to add this way. 我会在您的警告div中添加一个ID以添加这种方式。

Just noticed you said JQUERY. 刚注意到您说的是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 个解决方案

解决方案1
1 2016-01-27 10:48:14

解决方案2
0 2016-01-27 10:44:59

解决方案3
0 2016-01-27 10:45:10

解决方案4
0 2016-01-27 10:45:13

解决方案5
0 2016-01-27 10:53:09

解决方案6
0 2018-07-04 05:55:21

jQuery-将div动态添加到子级

问题描述

6 个解决方案

解决方案1 1 2016-01-27 10:48:14

解决方案2 0 2016-01-27 10:44:59

解决方案3 0 2016-01-27 10:45:10

解决方案4 0 2016-01-27 10:45:13

解决方案5 0 2016-01-27 10:53:09

解决方案6 0 2018-07-04 05:55:21

解决方案1
1 2016-01-27 10:48:14

解决方案2
0 2016-01-27 10:44:59

解决方案3
0 2016-01-27 10:45:10

解决方案4
0 2016-01-27 10:45:13

解决方案5
0 2016-01-27 10:53:09

解决方案6
0 2018-07-04 05:55:21