How to get HTML string of dynamically changed element using jQuery?

Question

$(document).ready(function() {
  var parent = $('#foo');
  parent.find('#bar').val('hi');
  console.log(parent.prop('outerHTML'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <input type='text' id="bar" value="" />
</div>

I have a container div with child input element, the initial value is empty, after that I change it's value using jQuery and try to get the changed html string using .prop('outerHTML'). However it returns:

<div id="foo"><input type="text" id="bar" value=""></div>

I need to return it as:

<div id="foo"><input type="text" id="bar" value="hi"></div>

Is this possible ?

score 4 · Accepted Answer · edited May 23 '17 at 10:29

4

You can use .attr() instead.

$(document).ready(function() {
  var parent = $('#foo');
  parent.find('#bar').attr('value', 'hi');
  console.log(parent.prop('outerHTML'));

  $('#txt').text('hello');
  console.log($('#par').find('#txt').prop('outerHTML'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <input type='text' id="bar" value="" />
</div>

<div id="par">
  <textarea id='txt'></textarea>
</div>

For more details - visit following link.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 22 '17 at 09:22

kind user

40,029
7
67
77

1

For more info on why to use this you can refer to this [question](http://stackoverflow.com/questions/11873721/jquery-val-change-doesnt-change-input-value) – George Feb 22 '17 at 09:23
1

@George Thank you. Edited. – kind user Feb 22 '17 at 09:25
Excellent ! Thanks for the help, I am surprised this question was never asked before :) – Biswas Khayargoli Feb 22 '17 at 09:29
@BiswasKhayargoli My pleasure, have a great day. – kind user Feb 22 '17 at 09:30
@Kinduser just a question! How to do the same thing if there was a textarea instead of input ? – Biswas Khayargoli Feb 22 '17 at 09:40
@BiswasKhayargoli Exactly the same, just replace `input` tag with ``. – kind user Feb 22 '17 at 09:42
@Kinduser but does support attribute value = "" ? – Biswas Khayargoli Feb 22 '17 at 09:43
@BiswasKhayargoli There was some conflict between val and setting it into `textarea`. I've provided you some working solution on it. Instead of `val()`, you can use `text()` here. It will change the `textarea` content dynamically. – kind user Feb 22 '17 at 09:49

score 1 · Answer 2 · answered Feb 22 '17 at 09:23

1

Sure, use direct attrbite change, not element value.

$(document).ready(function() {
  var parent = $('#foo');
  parent.find('#bar').attr('value', 'hi');
  console.log(parent.prop('outerHTML'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <input type='text' id="bar" value="" />
</div>

answered Feb 22 '17 at 09:23

VadimB

5,533
2
34
48

Thanks!!, but I will have to mark the above answer correct as he did it first :) – Biswas Khayargoli Feb 22 '17 at 09:30
Not a problem at all :))) – VadimB Feb 22 '17 at 09:30

score 0 · Answer 3 · answered Feb 22 '17 at 09:57

0

try this

$(document).ready(function() {
  var parent = $('#foo');
  parent.find('#bar').attr('value','hi');
  console.log(parent.prop('outerHTML'));
});

answered Feb 22 '17 at 09:57

Vitaliy Ryaboy

471
2
10

How to get HTML string of dynamically changed element using jQuery?

3 Answers3