Using jQuery .append and .html together

Question

I am having to add content dynamically to an iFrame that is generated by my CMS in their forum module. I have no control over the HTML. I am adding content dynamically and trying to find the best solution.

Here is the code I am using:

HTML

<iframe id="re_contentIframe">
 <html>
  <body>
   <p>Forum content is typed here.</p>
   <p>More forum content.</p>
    Forum Signature
  </body>
 </html>
</iframe>

JS

nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');
nestedFrame.append("Dynamic content" + data); //this is what is inserted dynamically.

Here is the issue I run into. Because I cannot control the code for the iFrame my CMS generates because of this I end up having something like this when I use the above code:

Forum Signature Dynamic content...

I want the dynamic content to be added below the Forum Signature . I then tired this:

nestedFrame.html("Dynamic content" + data); //this is what is inserted dynamically.

When I do this the forum content is wiped by .html

I then tried this:

nestedFrame.append(" <br> Dynamic content" + data);

When I do that it prints the <br> .

Here is my question:

Is there a way to append html to the target without wiping the html that is there? I cannot figure a way to do this.

Answer 1

jQuery.parseHTML(str) converts the passed string to the actual html contents (including textNodes) whereas just calling $(str) will only return the elements in the string.

So where

$(" <br> Dynamic content" + data) //=> <br>

$.parseHTML(" <br> Dynamic content" + data) // textNode + <br> + textNode

When you're appending the string, as I mentioned in the comment, you can also just use insertAdjacentHTML

nestedFrame[0].insertAdjacentHTML(" <br> Dynamic content" + data); which should do the same as nestedFrame.append($.parseHTML(" <br> Dynamic content" + data));

Answer 2

There is a few options

You can create element -> var br = document.createElement('br'); and append them
Use '<br>' inside, With + + in between, not 100% sure of that method.
You can checkout j Query after , wonderful solution for that issues.

Goodluck.

Using jQuery .append and .html together

Question

2 answers

solution1
1 ACCPTED 2013-11-23 03:09:20

solution2
0 2013-11-23 02:02:18

Using jQuery .append and .html together

Question

2 answers

solution1 1 ACCPTED 2013-11-23 03:09:20

solution2 0 2013-11-23 02:02:18

solution1
1 ACCPTED 2013-11-23 03:09:20

solution2
0 2013-11-23 02:02:18