CODEWITHSUNDEEP
javascriptjqueryhtml
Manu
Manu

Reputation: 57

insert a span from jQuery after dynamically generated table

I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.

Below is my code:

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

The span is getting added before hello. I want the span to be displayed after the table contents.

Upvotes: 2

Views: 5801

Answers (6)

Mohammed Shaheen MK
Mohammed Shaheen MK

Reputation: 1219

This will help you

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

Upvotes: 0

Ahsan
Ahsan

Reputation: 1084

Just change:

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

to:

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

JS Fiddle: http://jsfiddle.net/tk4h80yn/

Upvotes: 1

Bilal Hussain
Bilal Hussain

Reputation: 1011

Hey Manu try this.

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

You should use table id i.e #hu to append as place of #th

Hope this helps. :)

Upvotes: 1

mmik
mmik

Reputation: 5991

Use jQuery after function like the way @Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.

Upvotes: 1

Jorge Zuverza
Jorge Zuverza

Reputation: 915

The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:

$(document).ready(function(){
    dash();
    $("button").click(function(){
        $("#th").append("<span>span</span><br/>");
    });
});

function dash()
{ 
     $("#hu").html();
     $("#hu").append("<tr> <td> see this </td> </tr>");
}
<!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>

Upvotes: 3

reoxey
reoxey

Reputation: 704

you write something like this $("#hu").after("<span>span</span>");

this will put span after table

Upvotes: 1

Related Questions