Home/ Questions/Q 7438003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:29:14+00:00

I am trying to generate a simple jQuery code snippet in JavaScript and append

  • 0

I am trying to generate a simple jQuery code snippet in JavaScript and append it to one of the divs already available in my html file. Here is the string I am trying to append as an html content of the existing div element in my html file:

<form><div id=\"radio\"><input type=\"radio\" id=\"radio1\" name=\"radio\" /><label 
for=\"radio1\">Choice 1</label><input type=\"radio\" id=\"radio2\" name=\"radio\" /><label 
for=\"radio2\">Choice 2</label><input type=\"radio\" id=\"radio3\" name=\"radio\" /><label 
for=\"radio3\">Choice 3</label></div></form>

If you try the following code on JSFiddle:

$('div#new').append('<form><div id=\"radio\"><input type=\"radio\" id=\"radio1\" name=\"radio\" /><label 
for=\"radio1\">Choice 1</label><input type=\"radio\" id=\"radio2\" name=\"radio\" /><label 
for=\"radio2\">Choice 2</label><input type=\"radio\" id=\"radio3\" name=\"radio\" /><label 
for=\"radio3\">Choice 3</label></div></form>')

The Radio elements are displayed but with no jQuery visual style. When trying the same string in a static html file (see below) the visual style appears correctly. Would appreciate your help.

PS: I am trying to avoid jquery\html\JS template so would be great it I could get this code working with no needs of templates.

Thanks,
Jamil

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

<body>
    <form>
        <div id="radio">
            <input type="radio" id="radio1" name="radio" />
            <label for="radio1">Choice 1</label>

            <input type="radio" id="radio2" name="radio" />
            <label for="radio2">Choice 2</label>

            <input type="radio" id="radio3" name="radio" />
            <label for="radio3">Choice 3</label>
        </div>
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .trigger(‘create’) on the element will force the element to re-render again picking up all necessary styles.

    • 0