Question

我试图在动态生成的表之后添加一个span，但是在加载表的内容之前添加了span。

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    dash();
    $("button").click(function(){
        $("#th").append("<span>span</span>");
    });
});

function dash()
{ 
     $("#hu").html();
     $("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>

<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>

在你好之前增加了范围。我希望在表格内容之后显示范围。

Answer 1

你写了类似$("#hu").after("<span>span</span>");

的内容

这将把表格放在后面

Answer 2

在dom的底部添加了跨度。您在表格之前看到它，因为表格是正确的。请尝试以下内容：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
  <br/>
</div>
</body>
  
</html>

alertify.myAlert || alertify.dialog('myAlert',function factory(){
                return {
                    main:function(content){
                        this.setContent(content); 
                    },
                    setup:function(){
                        return {
                            options:{
                                modal:false,
                                basic:true,
                                maximizable:false,
                                resizable:false,
                                padding:false,
                                visible:false
                            }
                        };
                        },
                         hooks: {
                           onshow: function() {
                             this.elements.dialog.style.height = '50%';
                             this.elements.dialog.style.width = '15%';
                           }
                         }
                    };
            });

Answer 3

像@Reoxey那样使用jQuery after函数。不过，请确保您在</body>标记之前添加脚本，而不是在<head>标记上使用它。建议在</body>标记之前添加Javascript以防止脚本加载时渲染阻塞，并且对于网站感知头更好。在</body>标记之前添加Javascript也可以提高网站加载速度。

Answer 4

嘿Manu试试这个。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    dash();
    $("button").click(function(){
        $("#hu").append("<span>span</span>");
    });
});

function dash()
{ 
     $("#hu").html();
     $("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>

<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>

您应该使用表格ID #hu作为#th

的地方追加

希望这会有所帮助。：）

Answer 5

http://www.discussdesk.com/add-remove-more-rows-dynamically-using-jquery.htm

请仔细阅读上面的链接和代码......

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript">
 var rowCount = 1;
 function addMoreRows(frm) { 
rowCount ++; 
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="" type="text" size="17%" maxlength="120" /></td><td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>'; jQuery('#addedRows').append(recRow); } function removeRow(removeNum) { jQuery('#rowCount'+removeNum).remove(); } </script> - See more at: http://www.discussdesk.com/add-remove-more-rows-dynamically-using-jquery.htm#sthash.vrG6CPEc.dpuf

Answer 6

只需改变：

$("#th").append("<span>span</span>");

为：

$("table").append("<span>span</span>");

JS小提琴：http://jsfiddle.net/tk4h80yn/

Answer 7

这会对你有所帮助

  $(document).ready(function(){
    dash();
    $("button").click(function(){
        $("#hu").after("<span>span</span>");
    });
  });

在动态生成表之后从jQuery插入一个span

7 个答案: