Add div between element

Question

I have 2 paragraph and in between, I'll call a function. This function is to create a new div between the paragraph.

<div id="container">
    <p>lorem ipsum</p>
    <script>createDiv()</script>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>

I've seen append(), but it need a target to append. I want to add the div automatically every time I call the function.

Also, document.write() but this will clear the paragraph.

There's multiple paragraph on the same page, and I can't add id or class to these paragraph. I don't have control over them.

Do you mean something like this? http://stackoverflow.com/questions/27481198/how-to-append-text-to-current-position — Bhojendra Rauniyar, Jan 15 '15 at 04:48
Why can't you edit the HTML? Are these paragraphs in a container div? There is no way to determine which p tags are which without an id or class unless they are within a div with an id or class. — JoeMoe1984, Jan 15 '15 at 04:53
@MrBearAndBeer your answer adds the div inside the targeted p tag. OP wants it right after. Also he has mentioned that he can't edit the HTML so you won't be able to add an ID to the p tag. — JoeMoe1984, Jan 15 '15 at 04:58
@JoeMoe1984 update the markup. Thats all I have control over. — baker, Jan 15 '15 at 05:01
@baker my answer assumes you have jQuery loaded on that page. Is that correct? Or do you have to use javascript without any libraries loaded? — JoeMoe1984, Jan 15 '15 at 05:20

joeltine · Accepted Answer · 2015-01-15T07:02:50.993

I'll start off by saying, what you're trying to do is extremely ugly. Given your constraints, it's very likely there is something else fundamentally wrong with your app's structure. I even feel a bit dirty giving you this solution.

Regardless, to answer your question literally with the code examples and requirements you specified, you would likely need to keep a global counter of your script injection tags so you could append to its previous sibling. Here's an example that should do what you want w/ a fiddle (http://jsfiddle.net/h5qttvx5/3/).

Given HTML

<div id="container">
<p>lorem ipsum</p>
<script>createDiv()</script>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<script>createDiv()</script>
</div>

And JS (in head)

var scripts = 0;
function createDiv() {
    $("#container > script").eq(scripts).prev().after("<div>HI</div>");
    scripts++;
}

score 1 · Answer 2 · answered Jan 15 '15 at 04:46

Try this : remove script call and assign id to first paragraph, then use .after() to append div

<p id="firstP">lorem ipsum</p>
<p>lorem ipsum</p>

Note : - You can use class attribute for first p element instead of id and modify your jQuery selector as per like $('.className')

Use .after()

$(function(){
  $('#firstP').after('<div>Your div </div>');
});

score 0 · Answer 3 · 2015-02-17T07:08:40.187

0

First create a function and give it a name createDiv:

<script>
    function createDiv(div) {
       document.write('<div>Testing</div>');
    }
</script>

Them call the function where you want put the new div:

<p>lorem ipsum</p>
<script>createDiv()</script>
<p>lorem ipsum</p>

OBS: The script must be in the HEAD.

edited Feb 17 '15 at 07:08

answered Jan 15 '15 at 04:45

This will add div inside `p` tag but OP want it in between two `p` tags – Bhushan Kawadkar Jan 15 '15 at 04:49
This doesn't work!! Copy-pasting your solution in jsfiddle -> http://jsfiddle.net/L6c6roc8/ . No div is added between the two paragraph tags, or for that matter, within the paragraph tag. ***This answer does not even remotely answer the OP's question.*** – Satwik Nadkarny Feb 17 '15 at 06:27

score 0 · Answer 4 · answered Jan 15 '15 at 04:45

0

If you append inside the p tag:

 $('p').append('<div>xyz</div>');

If you append in between to p tag as sibling:

 $('<div>xyz</div>').insertAfter('p:first');

answered Jan 15 '15 at 04:45

Milind Anantwar

81,290
25
94
125

there's multiple
on the same page. doing this will create div on other
as well.
– baker Jan 15 '15 at 04:47
Wouldn't this add a div inside the p tag? I believe the OP wanted it in between the p tags not inside – JoeMoe1984 Jan 15 '15 at 04:47

Sajad Karuthedath · Answer 5 · 2015-01-15T04:55:22.060

0

change your markup to

<p id="lorem">lorem ipsum</p>
 <div id="thediv">
 </div>
<p>lorem ipsum</p>

and call $("#thediv").append("<div>append div</div>");

DEMO FIDDLE

OR

  $('#lorem').after('<div>append div </div>');

DEMO FIDDLE

edited Jan 15 '15 at 04:55

answered Jan 15 '15 at 04:47

Sajad Karuthedath

14,987
4
32
49

score 0 · Answer 6 · answered Jan 15 '15 at 04:48

0

$("p:first").after("<div>Hello World</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>lorem ipsum</p>

<p>lorem ipsum</p>

answered Jan 15 '15 at 04:48

Sadikhasan

18,365
21
80
122

score 0 · Answer 7 · answered Jan 15 '15 at 04:51

0

This code should work fine, if I understand your problem well enough.

<p>lorem ipsum</p>
<script>document.write('<div>Testing</div>')</script>
<p>lorem ipsum</p>

answered Jan 15 '15 at 04:51

Naveed

1,191
10
22

score 0 · Answer 8 · edited May 23 '17 at 10:27

since you have the div container with an id you can target that and work your way down. Try the following:

$('#container > p:first').after('<div>hello</div>');

This will target the first p tag in the container div and add a div right after it.

Performance wise you may want to use the first() method instead of the pseudo class :first.

$('#container > p').first().after('<div>hello</div>');

This Stackoverflow question has answers that show tests for both cases: jQuery :first vs. .first()

Add div between element

8 Answers8