How to get the HTML of a div, including value of inputs_问答_开发者

How to get the HTML of a div, including value of inputs

开发者 https://www.devze.com 2022-12-12 16:34 出处：网络

Say I have this div: <div id=\'myDiv\'> <input type=\'text\' id=\'foo\' size=\'30\' /> </div>

Say I have this div:

<div id='myDiv'>
  <input type='text' id='foo' size='30' />
</div>

and i run this javascript code:

($开发者_StackOverflow社区("#foo").val('bar');

If I then do:

alert($("#myDiv").html());

alert(document.getElementById('myDiv').innerHTML);

I get only the original copy of the html where the value of foo textbox is still blank. I would like to get a current copy of the html with a value='bar' attribute added to foo's html code.

How can this be done?

You could try setting the value param directly but I'm pretty sure that still won't affect the output of either .html() or .innerHTML:

$('#foo').attr('value', 'foo');

Instead, why not add it in yourself:

var html = $('#foo').html();
if (html.indexOf('value=') == -1)
    html.replace(/^<input/, '<input value="' + $('#foo').val() + '"');

You really want to use the jquery().clone() function. This will let you clone the #mydiv and then insert your clone in the iBox.

var clone = $('#myDiv').clone();
$('#iBox').append(clone);

Why not just copy the input's value property to its attribute before generating the innerHTML? Note that this will change the effect of any Reset type button you may have.

as I understand it, you want to display "{text from within the div} = bar"? If this is the case, the code below works for me in both FF and IE:

<html>
<head>
 <title>Hello</title>
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript"> 
  $(document).ready(function()
  {
   $("#foo").val('bar');
   alert(($(".myDiv").text()) + ($("#foo").val()));
  });
 </script>
</head>
<body>
 <div class='myDiv'>
  Value = <input type='text' id='foo' size='30' />
 </div>
</body>
</html>