Using Jquery to Add HTML Elements Rather than Changing the Layout

One thing I'm worried about is that when I pull raw HTML data from the database as a string using ajax, everything works fine.

However, when I try to add it into a DIV, it just displays the code as is without converting it into a formatted layout.

The JavaScript code snippet looks like this:

JQuery

var str='&lt;textarea rows="4" cols="10" class="form-control physical_examination(urine)_field1" name="physical_examination(urine)_field1[]" placeholder=""&gt;&lt;/textarea><br/>&lt;textarea rows="4" cols="10" class="form-control physical_examination(urine)_field2" name="physical_examination(urine)_field2[]" placeholder=""&gt;&lt;/textarea><br/>&lt;textarea rows="4" cols="10" class="form-control physical_examination(urine)_field3" name="physical_examination(urine)_field3[]" placeholder=""&gt;&lt;/textarea><br/>&lt;textarea rows="4" cols="10" class="form-control physical_examination(urine)_field4" name="physical_examination(urine)_field4[]" placeholder=""&gt;&lt;/textarea><br/>&lt;textarea rows="4" cols="10" class="form-control physical_examination(urine)_field5" name="physical_examination(urine)_field5[]" placeholder=""&gt;&lt;/textarea><br/>';

var generatedView=$(".generatedView");

generatedView.append(str);

HTML

<div class="generatedView"></div>

Output

A visualization of the textarea html:

https://i.sstatic.net/yLy6J.png

Expected Output

Desired view of the textarea in the DOM:

https://i.sstatic.net/rWPfI.png

jqueryhtmlcssajax

Answer №1

Transform the encoded entities back to their original form and then analyze the HTML using jQuery

const input  = '.... see question ....',
      html   = input
          .replace(/&lt;/g, '<')
          .replace(/&gt;/g, '>'),
      parsed = $.parseHTML(html);

$(".generatedView").append(parsed);

NOTE: this method is basic. For a more comprehensive solution, use a dedicated entity decoding library if your input contains other types of entities.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

This particular issue is a bit complex to articulate, so I'll begin by providing the code and then proceed to elaborate on the problem as best as I can. I'm assuming that you've already compared the results in Firefox and other browsers. He ...

jquerycssjquery-animate

Tips for excluding two attributes when styling a CSS calendar selection

Let's say I have a table structured like this: <td class="search-unit-custom-control-calendar-day search-unit-custom-control-calendar-day--not-this-month"> <time class="search-unit-custom-control-calendar-day__number">--</time> ...

javacssselenium-webdriver

Dynamic placement of divs when new content is added to the page

Before we begin, I'll provide you with the complete HTML code of my webpage: <div align="center"> <img src="http://questers.x10.bz/Header.png" style="position: absolute; margin-left: -440px; box-shadow: 0px 3px 12px 2px #000;" class="rotate" ...

htmlcss

Managing HTTP Requests on a Website Using HTTPS

On my html page, I have references to Java script files hosted by Google using Http. However, since my site is Https, the page loads with a message saying "Only secured content is displayed." I need to change these calls to use Https instead of http. I at ...

javascripthtmlasp.nethttphttps

The CSS transition seems to be malfunctioning

I need help figuring out how to make the submenu in the navigation bar appear with a transition effect. The CSS code I'm currently using is: #navigation li ul { display: none; width: auto; position: absolute; margin: 0; padding: 0; ...

css

The background remains transparent while the text appears opaque

Hey there! I'm currently facing an issue. I want to create a semi-transparent background image for my div, but I want the text inside to remain fully visible. Any suggestions on how to achieve this? Thanks in advance! <!DOCTYPE html> <html l ...

htmlcss

The client sent 65,536 bytes with XMLHttpRequest, causing a content length mismatch

I encountered an issue while attempting to upload a file in MVC4 using jquery. The error I am facing in Fiddler shows that when I try to upload any file, the Request.Files.Count is showing as 0. Is there a way to increase the request buffer size? functio ...

ajaxasp.net-mvcfile-uploadasynchronousfiddler

Verify in Selenium2 with Java if the value displayed on the page exceeds a specified threshold X

On my web page, I have a tag that will display a value provided by Python. This value is an integer retrieved from an AWS Athena query, and it will be set to 0 if the query fails. I am looking to verify that this value is greater than 0. The corresponding ...

javahtmlselenium

Error: SyntaxError - Found an unexpected token ":"

Can someone help me with this unexpected token : error that I am encountering? Here is the code where the issue is happening. <script type="text/javascript> $('.delete-btn').click(function() { $.ajax(function() { type: 'POST&apo ...

javascriptphpajax

Numerous JavaScript functions seamlessly integrated into HTML

I'm currently working on incorporating two sliders into my HTML code and utilizing JavaScript functions to update the values indicated by those sliders. I am facing an issue with organizing the code for the output of each slider, possibly due to how t ...

javascripthtmlsliderlabel

ajax - Text not appearing in Google's cached version

My website retrieves content using MS AJAX from an ASP.NET webservice. However, when I check the cached version on Google, I notice that the initial text is not displayed. I am wondering what would be the most effective method to ensure the website's ...

javascriptajax

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

javascriptjqueryhtmltextarea

What causes the addition of # to the URL when an iPhone user interacts with an HTML button?

Check out this live demonstration ... along with the corresponding code: $('#button').on('touchstart', 'a', function(e) { e.preventDefault(); }); When I use my iPhone4 and Safari 5.1.1, sometimes while tapping ...

jqueryiphoneeventstouchtouchstart

Utilizing the AJAX feature of CakePHP version 1.2 with a button

I'm attempting to create a form with the following features: An HTML form containing 5 buttons, each with a unique value. When a button is clicked, a text input field will appear with a default value based on the button's value. The buttons shou ...

ajaxcakephp-1.2

Facebook fails to extract metadata from blog posts

Recently, I've encountered an issue with my blog posts not pulling up the metadata when shared on Facebook. Surprisingly, this problem only started happening from November 12 onwards. Strangely, all my previous posts before that date seem to be workin ...

htmlcssfacebookmetadata

Upon clicking a button, initiate an Ajax call to retrieve a value from the code behind (aspx.cs) and display it in an input field on the same page

I am a beginner in the world of AJAX and encountering a problem. I need to initiate an AJAX call when a button is clicked. The goal is to send the value of an input field to the code behind page, aspx.cs, and then display the response from that same input ...

javascriptc#jqueryasp.netajax

Restricting the quantity of dynamic list items within a function

My current goal with the Code I'm working on involves achieving two specific outcomes, which has me debating whether to separate the questions: JS: function listPosts(data) { postlimit = var output='<ul data-role="listview" data-fil ...

javascriptjqueryajax

What are the best ways to format text conditionally depending on a form's status?

Is there a way to change the text color in an HTML form to be red when the form is invalid and green when it is valid using Angular 8? (HTML) <p class="status"> Form Status: {{ Form.status }} </p> (TS) Form = this.fb.group({ ...

htmlcssangulartypescriptconditional-formatting

"Despite encountering an error, the jQuery AJAX request remains active and continues to

Check out this code snippet I created. early_face_detect=$.ajax({ type: "POST", url: "earlydetect.py", timeout: 15000, success: function(respond) { var s=grab_early_details(respond); }, error: function(xmlhttprequest, textstatus, message) ...

javascriptjqueryajaxhtml

Initiate Bootstrap Popover following the successful submission of POST data via Ajax

Hello, I'm currently facing an issue with Bootstrap Popover. My goal is to display a Popover after successfully sending data to a .php file using the Ajax POST method and then executing the .php script. This particular functionality is intended for s ...

phpajaxtwitter-bootstraptwitter-bootstrap-3bootstrap-popover