How to write a jQuery to swap the text of two text elements in SVG tag

-2

I have created the svg tag with two text elements.How can I write jquery in order to swap the contents of the elements with id txt1 and id txt2?

<svg id = "svg_box">

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

</svg>

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

asked Jan 2 at 14:02

Pranathi Badugu

123

1

Please post an example of the desired output along with what you've tried so far.

– Islam Elshobokshy
Jan 2 at 14:18

Would it not be easier to simply swap the position of the two elements?

– David Thomas
Jan 2 at 14:39

add a comment |

-2

I have created the svg tag with two text elements.How can I write jquery in order to swap the contents of the elements with id txt1 and id txt2?

<svg id = "svg_box">

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

</svg>

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

asked Jan 2 at 14:02

Pranathi Badugu

123

1

Please post an example of the desired output along with what you've tried so far.

– Islam Elshobokshy
Jan 2 at 14:18

Would it not be easier to simply swap the position of the two elements?

– David Thomas
Jan 2 at 14:39

add a comment |

-2

I have created the svg tag with two text elements.How can I write jquery in order to swap the contents of the elements with id txt1 and id txt2?

<svg id = "svg_box">

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

</svg>

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

asked Jan 2 at 14:02

Pranathi Badugu

123

I have created the svg tag with two text elements.How can I write jquery in order to swap the contents of the elements with id txt1 and id txt2?

<svg id = "svg_box">

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

</svg>

jquery html

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

asked Jan 2 at 14:02

Pranathi Badugu

123

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

asked Jan 2 at 14:02

Pranathi Badugu

123

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

edited Jan 2 at 14:35

wanttobeprofessional

1,02931323

asked Jan 2 at 14:02

Pranathi Badugu

123

asked Jan 2 at 14:02

Pranathi Badugu

123

asked Jan 2 at 14:02

Pranathi Badugu

123

1

Please post an example of the desired output along with what you've tried so far.

– Islam Elshobokshy
Jan 2 at 14:18

Would it not be easier to simply swap the position of the two elements?

– David Thomas
Jan 2 at 14:39

add a comment |

1

Please post an example of the desired output along with what you've tried so far.

– Islam Elshobokshy
Jan 2 at 14:18

Would it not be easier to simply swap the position of the two elements?

– David Thomas
Jan 2 at 14:39

Please post an example of the desired output along with what you've tried so far.

– Islam Elshobokshy
Jan 2 at 14:18

Would it not be easier to simply swap the position of the two elements?

– David Thomas
Jan 2 at 14:39

add a comment |

3 Answers
3

active

oldest

votes

Just like that.

If you want to save HTML

let txt1 = $('#txt1').html();

let txt2 = $('#txt2').html();

$('#txt1').html(txt2);

$('#txt2').html(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

If you want Text only

let txt1 = $('#txt1').text();

let txt2 = $('#txt2').text();

$('#txt1').text(txt2);

$('#txt2').text(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

answered Jan 2 at 14:39

Oen44

1,8191919

add a comment |

You can use this to swap the content.

function swap_content(){

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

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

  $('#txt1').html(txt2);

  $('#txt2').html(txt1);

}

answered Jan 2 at 14:41

Fran G S

712

add a comment |

Copy content of item-1 into a temporary variable. Move content of item-2 to item-1. Copy content of temporary variable to item-2.

function switchText(selector1, selector2) {

  const el1 = $(selector1);

  const el2 = $(selector2);

  const tmp  = el1.text();

  el1.text(el2.text());

  el2.text(tmp);

}



switchText("#txt1","#txt2")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<svg id="svg_box" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">

  <style>

    svg { background-color: #eee; }

    .text { font: bold 20px sans-serif; }

    .upper { fill: darkorange; }

    .lower { fill: darkgreen; }

  </style>

  <text x="10" y="30" id="txt1" class="text upper">#1 hello</text>

  <text x="10" y="60" id="txt2" class="text lower">#2 hi there</text>

</svg>

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54007713%2fhow-to-write-a-jquery-to-swap-the-text-of-two-text-elements-in-svg-tag%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Just like that.

If you want to save HTML

let txt1 = $('#txt1').html();

let txt2 = $('#txt2').html();

$('#txt1').html(txt2);

$('#txt2').html(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

If you want Text only

let txt1 = $('#txt1').text();

let txt2 = $('#txt2').text();

$('#txt1').text(txt2);

$('#txt2').text(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

answered Jan 2 at 14:39

Oen44

1,8191919

add a comment |

Just like that.

If you want to save HTML

let txt1 = $('#txt1').html();

let txt2 = $('#txt2').html();

$('#txt1').html(txt2);

$('#txt2').html(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

If you want Text only

let txt1 = $('#txt1').text();

let txt2 = $('#txt2').text();

$('#txt1').text(txt2);

$('#txt2').text(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

answered Jan 2 at 14:39

Oen44

1,8191919

add a comment |

Just like that.

If you want to save HTML

let txt1 = $('#txt1').html();

let txt2 = $('#txt2').html();

$('#txt1').html(txt2);

$('#txt2').html(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

If you want Text only

let txt1 = $('#txt1').text();

let txt2 = $('#txt2').text();

$('#txt1').text(txt2);

$('#txt2').text(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

answered Jan 2 at 14:39

Oen44

1,8191919

Just like that.

If you want to save HTML

let txt1 = $('#txt1').html();

let txt2 = $('#txt2').html();

$('#txt1').html(txt2);

$('#txt2').html(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

If you want Text only

let txt1 = $('#txt1').text();

let txt2 = $('#txt2').text();

$('#txt1').text(txt2);

$('#txt2').text(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

let txt1 = $('#txt1').html();

let txt2 = $('#txt2').html();

$('#txt1').html(txt2);

$('#txt2').html(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

let txt1 = $('#txt1').html();

let txt2 = $('#txt2').html();

$('#txt1').html(txt2);

$('#txt2').html(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

let txt1 = $('#txt1').text();

let txt2 = $('#txt2').text();

$('#txt1').text(txt2);

$('#txt2').text(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

let txt1 = $('#txt1').text();

let txt2 = $('#txt2').text();

$('#txt1').text(txt2);

$('#txt2').text(txt1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<text id = "txt1">hello</text>

<text id = "txt2">hi</text>

answered Jan 2 at 14:39

Oen44

1,8191919

answered Jan 2 at 14:39

Oen44

1,8191919

answered Jan 2 at 14:39

Oen44

1,8191919

answered Jan 2 at 14:39

Oen44

1,8191919

add a comment |

You can use this to swap the content.

function swap_content(){

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

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

  $('#txt1').html(txt2);

  $('#txt2').html(txt1);

}

answered Jan 2 at 14:41

Fran G S

712

add a comment |

You can use this to swap the content.

function swap_content(){

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

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

  $('#txt1').html(txt2);

  $('#txt2').html(txt1);

}

answered Jan 2 at 14:41

Fran G S

712

add a comment |

You can use this to swap the content.

function swap_content(){

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

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

  $('#txt1').html(txt2);

  $('#txt2').html(txt1);

}

answered Jan 2 at 14:41

Fran G S

712

You can use this to swap the content.

function swap_content(){

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

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

  $('#txt1').html(txt2);

  $('#txt2').html(txt1);

}

answered Jan 2 at 14:41

Fran G S

712

answered Jan 2 at 14:41

Fran G S

712

answered Jan 2 at 14:41

Fran G S

712

answered Jan 2 at 14:41

Fran G S

712

add a comment |

Copy content of item-1 into a temporary variable. Move content of item-2 to item-1. Copy content of temporary variable to item-2.

function switchText(selector1, selector2) {

  const el1 = $(selector1);

  const el2 = $(selector2);

  const tmp  = el1.text();

  el1.text(el2.text());

  el2.text(tmp);

}



switchText("#txt1","#txt2")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<svg id="svg_box" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">

  <style>

    svg { background-color: #eee; }

    .text { font: bold 20px sans-serif; }

    .upper { fill: darkorange; }

    .lower { fill: darkgreen; }

  </style>

  <text x="10" y="30" id="txt1" class="text upper">#1 hello</text>

  <text x="10" y="60" id="txt2" class="text lower">#2 hi there</text>

</svg>

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

add a comment |

Copy content of item-1 into a temporary variable. Move content of item-2 to item-1. Copy content of temporary variable to item-2.

function switchText(selector1, selector2) {

  const el1 = $(selector1);

  const el2 = $(selector2);

  const tmp  = el1.text();

  el1.text(el2.text());

  el2.text(tmp);

}



switchText("#txt1","#txt2")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<svg id="svg_box" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">

  <style>

    svg { background-color: #eee; }

    .text { font: bold 20px sans-serif; }

    .upper { fill: darkorange; }

    .lower { fill: darkgreen; }

  </style>

  <text x="10" y="30" id="txt1" class="text upper">#1 hello</text>

  <text x="10" y="60" id="txt2" class="text lower">#2 hi there</text>

</svg>

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

add a comment |

Copy content of item-1 into a temporary variable. Move content of item-2 to item-1. Copy content of temporary variable to item-2.

function switchText(selector1, selector2) {

  const el1 = $(selector1);

  const el2 = $(selector2);

  const tmp  = el1.text();

  el1.text(el2.text());

  el2.text(tmp);

}



switchText("#txt1","#txt2")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<svg id="svg_box" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">

  <style>

    svg { background-color: #eee; }

    .text { font: bold 20px sans-serif; }

    .upper { fill: darkorange; }

    .lower { fill: darkgreen; }

  </style>

  <text x="10" y="30" id="txt1" class="text upper">#1 hello</text>

  <text x="10" y="60" id="txt2" class="text lower">#2 hi there</text>

</svg>

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

Copy content of item-1 into a temporary variable. Move content of item-2 to item-1. Copy content of temporary variable to item-2.

function switchText(selector1, selector2) {

  const el1 = $(selector1);

  const el2 = $(selector2);

  const tmp  = el1.text();

  el1.text(el2.text());

  el2.text(tmp);

}



switchText("#txt1","#txt2")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<svg id="svg_box" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">

  <style>

    svg { background-color: #eee; }

    .text { font: bold 20px sans-serif; }

    .upper { fill: darkorange; }

    .lower { fill: darkgreen; }

  </style>

  <text x="10" y="30" id="txt1" class="text upper">#1 hello</text>

  <text x="10" y="60" id="txt2" class="text lower">#2 hi there</text>

</svg>

function switchText(selector1, selector2) {

  const el1 = $(selector1);

  const el2 = $(selector2);

  const tmp  = el1.text();

  el1.text(el2.text());

  el2.text(tmp);

}



switchText("#txt1","#txt2")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<svg id="svg_box" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">

  <style>

    svg { background-color: #eee; }

    .text { font: bold 20px sans-serif; }

    .upper { fill: darkorange; }

    .lower { fill: darkgreen; }

  </style>

  <text x="10" y="30" id="txt1" class="text upper">#1 hello</text>

  <text x="10" y="60" id="txt2" class="text lower">#2 hi there</text>

</svg>

function switchText(selector1, selector2) {

  const el1 = $(selector1);

  const el2 = $(selector2);

  const tmp  = el1.text();

  el1.text(el2.text());

  el2.text(tmp);

}



switchText("#txt1","#txt2")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<svg id="svg_box" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">

  <style>

    svg { background-color: #eee; }

    .text { font: bold 20px sans-serif; }

    .upper { fill: darkorange; }

    .lower { fill: darkgreen; }

  </style>

  <text x="10" y="30" id="txt1" class="text upper">#1 hello</text>

  <text x="10" y="60" id="txt2" class="text lower">#2 hi there</text>

</svg>

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

answered Jan 2 at 14:46

Daniel Sixl

1,3042718

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu