Insert HTML after certain paragraph of HTML string

Question

I've got a HTML-string I'd like to render but append some HTML after the 2nd paragraph first.

function insertStuff() {
  //var string = "<div><p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p></div>"; works
  var string = '<p><img src="http://example.com/my-cool-picture.png" alt="alt text"></p><p>2nd paragraph</p><p>3rd paragrpah</p>' // doesn't work
  var parsedHtml = $(string)
  parsedHtml.find("p:nth-child(2)").after("<p>My cool insert</p>")
  return parsedHtml.html()
}

This works for the HTML string above but the following one only return the <img> after invoking parsedHtml.html()

What am I doing wrong?

Unfortunately the .find() method only works for child nodes, therefore you will have to wrap your string with a <div>, use .find() and append content accordingly, and then unwrap it thereafter. — Terry
– Terry, Commented Mar 18, 2015 at 12:07

Satpal · Accepted Answer · 2015-03-18 12:10:53Z

4

Since you are use .html() it will return html of first element.

You can wrap your content in a div like

var parsedHtml = $('<div />').html(string)

Then your code will work.

function insertStuff() {
  var string = '<p><img src="http://example.com/my-cool-picture.png" alt="alt text"></p><p>2nd paragraph</p><p>3rd paragrpah</p>'
  var parsedHtml = $('<div />').html(string)
  parsedHtml.find("p:nth-child(2)").after("<p>My cool insert</p>")
  return parsedHtml.html()
}

alert(insertStuff())

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

answered Mar 18, 2015 at 12:10

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manoj · Accepted Answer · 2015-03-18 12:04:53Z

2

Try this

function insertStuff() {
  var string = '<div><p><img src="http://example.com/my-cool-picture.png" alt="alt text"></p><p>2nd paragraph</p><p>3rd paragrpah</p></div>';
  var parsedHtml = $(string)
  parsedHtml.find("p:nth-child(2)").after("<p>My cool insert</p>")
  return parsedHtml.html()
}

You should put this string in a div as parent.

answered Mar 18, 2015 at 12:04

Manoj

5,0913 gold badges34 silver badges59 bronze badges

Comments

Ram · Accepted Answer · 2015-03-18 12:11:32Z

2

That's because html method as getter returns html content of the first element in the set. You should either wrap all the top-level elements in the set with another element and read it's html content or iterate through the set and concatenate each element's outerHTML property.

parsedHtml.map(function() { return this.outerHTML; }).get().join('');

If you want to get the innerHTML of all the elements in the set, replace outerHTML with innerHTML.

edited Mar 18, 2015 at 12:11

answered Mar 18, 2015 at 12:06

Ram

145k16 gold badges174 silver badges201 bronze badges

2 Comments

Hedge Over a year ago

how can I return the content of all elements in the set? I don't want to wrap the content

Hedge Over a year ago

Thanks for the solution but I think I'll go with wrapping it in a <div

sunil chugh · Accepted Answer · 2015-03-18 12:44:40Z

0

when you use find() with a selector it will search inside that selector (in child nodes) that why when you use string with div tag you are getting the desired result and when you delete div the problem occured

answered Mar 18, 2015 at 12:44

sunil chugh

93 bronze badges

1 Comment

sunil chugh Over a year ago

use this code function insertStuff() { //var string = "<div><p>paragraph 1</p><p>paragraph 2</p><p>paragraph 3</p></div>"; works var string = '<div><p>test</p><p>2nd paragraph</p><p>3rd paragrpah</p></div>' // doesn't work var parsedHtml = $(string); parsedHtml.find("p:nth-child(2)").after("<p>My cool insert</p>") // return parsedHtml.html() return parsedHtml.html(); }

Collectives™ on Stack Overflow

Insert HTML after certain paragraph of HTML string

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related