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 ?

Community · Accepted Answer · 2017-05-23 10:29:49Z

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, 2017 at 10:29

CommunityBot

11 silver badge

answered Feb 22, 2017 at 9:22

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

George Over a year ago

For more info on why to use this you can refer to this question

kind user Over a year ago

@George Thank you. Edited.

Biswas Khayargoli Over a year ago

Excellent ! Thanks for the help, I am surprised this question was never asked before :)

kind user Over a year ago

@BiswasKhayargoli My pleasure, have a great day.

Biswas Khayargoli Over a year ago

@Kinduser just a question! How to do the same thing if there was a textarea instead of input ?

|

VadimB · Accepted Answer · 2017-02-22 09:23:14Z

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, 2017 at 9:23

VadimB

5,7213 gold badges39 silver badges49 bronze badges

2 Comments

Biswas Khayargoli Over a year ago

Thanks!!, but I will have to mark the above answer correct as he did it first :)

VadimB Over a year ago

Not a problem at all :)))

Vitaliy Ryaboy · Accepted Answer · 2017-02-22 09:57:20Z

0

try this

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

answered Feb 22, 2017 at 9:57

Vitaliy Ryaboy

4782 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

8 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Linked

Related