Avatar of Solutionabc
Solutionabc asked on

Jquery inject html

Hi,

I want to wrap my input element in a span tag but unsure how to do it. My code is as follows.
The only unique identifier is the inputs id and name.

How can I do this using jquery?

Thanks!
<td class="genericFormCell">

<div class="genericFormFieldRollNumber>

<strong>Roll Number</strong>

</div>

<div class="genericFormInputRollNumber">

<input name="ctl00$m$g_050451fe_f59b_43d9_9bbd_ee37318e73f3$Roll Number" class="genericFormFieldRollNumber" id="ctl00_m_g_050451fe_f59b_43d9_9bbd_ee37318e73f3_Roll Number" style="width: 400px;" type="text" maxlength="255"/>

</div>

</td>

I want to change it to:

<td class="genericFormCell">

<div class="genericFormFieldRollNumber>

<strong>Roll Number</strong>

</div>

<div class="genericFormInputRollNumber">

<span id="custom">


<input name="ctl00$m$g_050451fe_f59b_43d9_9bbd_ee37318e73f3$Roll Number" class="genericFormFieldRollNumber" id="ctl00_m_g_050451fe_f59b_43d9_9bbd_ee37318e73f3_Roll Number" style="width: 400px;" type="text" maxlength="255"/>

</span>

</div>

</td>

Open in new window

JavaScript

Avatar of undefined
Last Comment
jrm213jrm213

8/22/2022 - Mon
leakim971

For example :

		var custom = "custom";	
		$("<span id=\"" + custom +"\" />").appendTo( $("input[name='ctl00$m$g_050451fe_f59b_43d9_9bbd_ee37318e73f3$Roll Number']").parent() );
		$("input[name='ctl00$m$g_050451fe_f59b_43d9_9bbd_ee37318e73f3$Roll Number']").appendTo("#" + custom);		

Open in new window


Test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		var custom = "custom";	
		$("<span id=\"" + custom +"\" />").appendTo( $("input[name='ctl00$m$g_050451fe_f59b_43d9_9bbd_ee37318e73f3$Roll Number']").parent() );
		$("input[name='ctl00$m$g_050451fe_f59b_43d9_9bbd_ee37318e73f3$Roll Number']").appendTo("#" + custom);		
	});
</script>
</head>
<body>
<table>
    <tr>
        <td class="genericFormCell">
            <div class="genericFormFieldRollNumber">
            <strong>Roll Number</strong>
            </div>
            <div class="genericFormInputRollNumber">
            	<input name="ctl00$m$g_050451fe_f59b_43d9_9bbd_ee37318e73f3$Roll Number" class="genericFormFieldRollNumber" id="ctl00_m_g_050451fe_f59b_43d9_9bbd_ee37318e73f3_Roll Number" style="width: 400px;" type="text" maxlength="255"/>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
jrm213jrm213

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Solutionabc

Thanks for the replies.

I have tried both solutions but unfortunately they did not work for me.

Using jrm213's solution the .wrap does not appear to be working. If I swap the .wrap for a .val it works fine.

not really sure what to do from here. any suggestions?

thanks.
jrm213jrm213

Hi, I am not sure why it wouldn't work: http://api.jquery.com/wrap/

Are you still having a problem or is it resolved and you just don't know what to do with the question...?
Your help has saved me hundreds of hours of internet surfing.
fblack61