How to store html structure in variable , jquery

Question

please see the following code

<div class="test" style="color:red">1</div>
<div class="test" style="color:blue">2</div>
<div class="test" style="color:green">3</div>

I need to save this html structure in javascript variable . So that i used the following code

<script>
    $(".test").each(function(){
var otext='<div class="test" style="color:'+$(".test").css("color")+';">'+$(".test").text()+'</div>';
    });
</script>

but in otext i got <div class="test" style="color:redbluegreen">123</div>. Actually what wrong in my code ? How to store all html structure and style of class test using jquery?

the desired out put is var otext =<div class="test" style="color:red">1</div><div class="test" style="color:blue">2</div><div class="test" style="color:green">3</div>;

UPDATE :

what happen if the html structure is lite this ?

<div class="test" style="color:red">1<button clss="test-button" value="remove"/></div>

and here i don't want to save this div structure without <button class="test-button">.

first get otext variable out of each function then store using otext += '<...>' inside — Mamdouh Saeed
– Mamdouh Saeed, Commented Oct 24, 2016 at 9:50

Satpal · Accepted Answer · 2016-10-24 10:50:32Z

3

You can use .map() to iterate and create an array of string using outerHTML property of each element.

jQuery(function($) {
  var text = $(".test").map(function() {
    return this.outerHTML
  }).get().join('');
  console.log(text)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="color:red">1</div>
<div class="test" style="color:blue">2</div>
<div class="test" style="color:green">3</div>

As per comment

jQuery(function($) {
  var text = $(".test").map(function() {
    var elem = $(this).clone();
    elem.find('.test-button').remove();
    return elem.prop("outerHTML").trim();
  }).get().join('');
  console.log(text)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="color:red">1
  <button class="test-button" value="remove" />
</div>
<div class="test" style="color:blue">2
  <button class="test-button" value="remove" />
</div>
<div class="test" style="color:green">3
  <button class="test-button" value="remove" />
</div>

edited Oct 24, 2016 at 10:50

answered Oct 24, 2016 at 9:54

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Dan Over a year ago

thank you . I just update the question .please look .

Sudharsan S · Accepted Answer · 2016-10-24 09:55:41Z

3

In your context the each loop every time the variable has been reassigned and override the values. Assign as global variable and concat it.

And use $(this) for getting current object

var otext = '';

$(".test").each(function(){
 otext +='<div class="test" style="color:'+$(this).css("color")+';">'+$(this).text()+'</div>';
});

console.log(otext);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="color:red">1</div>
<div class="test" style="color:blue">2</div>
<div class="test" style="color:green">3</div>

edited Oct 24, 2016 at 9:55

answered Oct 24, 2016 at 9:50

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

Jigar7521 · Accepted Answer · 2016-10-24 09:53:21Z

1

var otext = '';

in function

otext+='<div cl......

answered Oct 24, 2016 at 9:53

Jigar7521

1,5791 gold badge14 silver badges29 bronze badges

Comments

RAUSHAN KUMAR · Accepted Answer · 2016-10-24 09:53:39Z

1

You should wrap your html inside a div like

<div id="mydiv>
    <div class="test" style="color:red">1</div>
   <div class="test" style="color:blue">2</div>
   <div class="test" style="color:green">3</div>
</div>

Then use the jquery as

var html=$('#mydiv').html();

answered Oct 24, 2016 at 9:53

RAUSHAN KUMAR

6,0345 gold badges37 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to store html structure in variable , jquery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related