Append HTML to HTML string in jQuery

Question

I have a HTML string and I want to append another html string to this in some arbitrary location.

Example:

var htmlString = '<div id="insert"> <p> Hello </p> </div>'

var appendString = '<p> Goodbye </p>'

$(appendString).appendTo( $(htmlString).find('#insert') )

Obviously that doesn't work because it cannot insert directly into the string however, I do not want to convert htmlString into a jQuery object because it messes up the structure of the HTML document and I need the script tags to remain in the locations they have been inserted.

Hope that's clear enough.

EDIT:

My apologies, I think I explained my problem poorly.

I have a HTML string that includes a table and I want to append a new row to the table. My problem is that I have a number of <script> tags that I need to remain in their locations. When I convert the string into a $(string), I am then unable to return it to its original form:

var htmlString = $('body').html();
var $htmlString = $(x);
console.log($htmlString.html());

This is a Confluence page that I attempting to do this on and I have limited access to the source; most I can do is to modify what is already there.

The HTML string comes from a AJAX request of another page on Confluence and I need the scripts to remain in the same place so that my other macros will run correctly.

I have included a JS Bin example of my problem to hopefully illustrate my problem clearly.

https://jsbin.com/ruwawuzica/edit?html,js,output

The Process · Accepted Answer · 2016-03-09 16:50:59Z

4

You can do it like this:

var htmlString = '<div id="insert"> <p> Hello </p> </div>';

var appendString = '<p> Goodbye </p>';
var added = ($(htmlString).append($(appendString)));
$(added).appendTo('div');

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

Since $(htmlString) is the element <div id="insert"></div> wrapped in jquery

edited Mar 9, 2016 at 16:50

answered Mar 9, 2016 at 16:22

The Process

5,9533 gold badges33 silver badges41 bronze badges

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

1 Comment

Mehul Kothari Over a year ago

What exactly asked in question was how we can insert good by a string in id="insert" part of HTML but what you have suggested is how we can append the html.

Ezequiel García · Accepted Answer · 2016-03-09 16:39:50Z

2

Hi @MyLittleDax i guess you can do this:

var htmlString = "<div id='insert'> <p> Hello </p> </div>";
var appendString = "<p> Goodbye </p>";
//your container where you put the html
var container = $('#container'); 
container.empty();
container.append(htmlString);
var insert = $('#insert');
insert.append(appendString);

good luck!!!

answered Mar 9, 2016 at 16:39

Ezequiel García

2,81621 silver badges13 bronze badges

Collectives™ on Stack Overflow

Append HTML to HTML string in jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related