how do i add HTML below an element with javascript/jquery?

Question

I have the following HTML:

<h1 id="site-title" class="page-title"> Website Name </h1>

And I want to add the following direclty underneath it, but I can't do it in the HTML so I would need to with javascript/jquery.

<p id="site-tagline" class="site-subtitle">Tagline, Tagline, Tagline</p>

How would I best do this?

I have this but nothing is showing up on the rendered page.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script> $("<h1>Fashion</h1>").insertAfter("#site-title"); </script>

Possible duplicate of [How to do insert After() in JavaScript without using a library?](http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library) — Mahi, Nov 19 '16 at 19:48
@Mahi thanks but pretty new to this. that link seems very complicated. — rs19, Nov 19 '16 at 19:50
@charlietfl updated problem statement. and there is site-title. see the first code example. — rs19, Nov 19 '16 at 20:05

score 0 · Accepted Answer · answered Nov 19 '16 at 20:06

0

This is working, please check JSFiddle.

   $("<h1>Fashion</h1>").insertAfter("#site-title");

It's not working for you? You need to check jQuery errors.

answered Nov 19 '16 at 20:06

Alex

2,707
4
29
42

ah thanks. ok so the error is `(index):58 Uncaught TypeError: "#site-title.page-title".append is not a function(…)(anonymous function) @ (index):58` – rs19 Nov 19 '16 at 20:08
Sorry, I think you make a mistake, you get an error with ""#site-title.page-title", but we don't have this element in my code above... – Alex Nov 20 '16 at 06:56

score 0 · Answer 2 · answered Nov 19 '16 at 20:08

After

$("h1").after('<p id="site-tagline" class="site-subtitle">Tagline, Tagline, Tagline</p>');

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

<h1 id="site-title" class="page-title"> Website Name </h1>

jafarbtech · Answer 3 · 2016-11-19T20:22:14.483

Add the taglines using append command

$(document).ready(function(){
$( "#site-tagline" ).append( '<h1 id="site-title" class="page-title"> Tagline 1 </h1>' );

$( "#site-tagline" ).append( ',' );
$( "#site-tagline" ).append( '<h1 id="site-title" class="page-title"> Tagline 2 </h1>' );

$( "#site-tagline" ).append( ',' );
$( "#site-tagline" ).append( '<h1 id="site-title" class="page-title"> Tagline 3 </h1>' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="site-tagline" class="site-subtitle"></p>

how do i add HTML below an element with javascript/jquery?

3 Answers3