Using Javascript to replace an angular div with different elements

I'm currently working on a website project that involves using a couple of elements from a common package. The elements are a header and a footer, and I don't have the ability to change these elements because other websites are using them.

Now I need to change some of the elements, some text and anchors need to be changed. The only option I have is to replace them.

I currently have the following element:

<div class="visible-element">

<p style="display: inline-block;" class="ng-binding">Need a hand?</p>

<a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

<span>|</span>

<a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

This element comes from the common package. What I need is to change the email and mailto fields. Since those don't have a specific class, one of the solutions I see is to replace the entire element.

// replace contents

var email = "mailto:yolo@mymail.com"

$(".visible-element").html(

    $("<a>").attr("href", "mailto:" + email).text(email)

);

With this I can replace the above element with one that only has the email, but I still need the text and phone number.

I'm not really seeing how can I concatenate the elements to form the original class but with all the elements needed.

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

Use .empty() and then .append() the jQuery elements, exactly as you have for the link, and add them 1 by 1. You've pretty much got what you need already.

– Archer
Jan 2 at 22:32

add a comment |

Now I need to change some of the elements, some text and anchors need to be changed. The only option I have is to replace them.

I currently have the following element:

<div class="visible-element">

<p style="display: inline-block;" class="ng-binding">Need a hand?</p>

<a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

<span>|</span>

<a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

This element comes from the common package. What I need is to change the email and mailto fields. Since those don't have a specific class, one of the solutions I see is to replace the entire element.

// replace contents

var email = "mailto:yolo@mymail.com"

$(".visible-element").html(

    $("<a>").attr("href", "mailto:" + email).text(email)

);

With this I can replace the above element with one that only has the email, but I still need the text and phone number.

I'm not really seeing how can I concatenate the elements to form the original class but with all the elements needed.

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

Use .empty() and then .append() the jQuery elements, exactly as you have for the link, and add them 1 by 1. You've pretty much got what you need already.

– Archer
Jan 2 at 22:32

add a comment |

Now I need to change some of the elements, some text and anchors need to be changed. The only option I have is to replace them.

I currently have the following element:

<div class="visible-element">

<p style="display: inline-block;" class="ng-binding">Need a hand?</p>

<a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

<span>|</span>

<a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

This element comes from the common package. What I need is to change the email and mailto fields. Since those don't have a specific class, one of the solutions I see is to replace the entire element.

// replace contents

var email = "mailto:yolo@mymail.com"

$(".visible-element").html(

    $("<a>").attr("href", "mailto:" + email).text(email)

);

With this I can replace the above element with one that only has the email, but I still need the text and phone number.

I'm not really seeing how can I concatenate the elements to form the original class but with all the elements needed.

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

Now I need to change some of the elements, some text and anchors need to be changed. The only option I have is to replace them.

I currently have the following element:

<div class="visible-element">

<p style="display: inline-block;" class="ng-binding">Need a hand?</p>

<a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

<span>|</span>

<a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

This element comes from the common package. What I need is to change the email and mailto fields. Since those don't have a specific class, one of the solutions I see is to replace the entire element.

// replace contents

var email = "mailto:yolo@mymail.com"

$(".visible-element").html(

    $("<a>").attr("href", "mailto:" + email).text(email)

);

With this I can replace the above element with one that only has the email, but I still need the text and phone number.

I'm not really seeing how can I concatenate the elements to form the original class but with all the elements needed.

javascript jquery angularjs

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

asked Jan 2 at 22:26

Cláudio Ribeiro

53022044

Use .empty() and then .append() the jQuery elements, exactly as you have for the link, and add them 1 by 1. You've pretty much got what you need already.

– Archer
Jan 2 at 22:32

add a comment |

Use .empty() and then .append() the jQuery elements, exactly as you have for the link, and add them 1 by 1. You've pretty much got what you need already.

– Archer
Jan 2 at 22:32

Use .empty() and then .append() the jQuery elements, exactly as you have for the link, and add them 1 by 1. You've pretty much got what you need already.

– Archer
Jan 2 at 22:32

add a comment |

1 Answer
1

active

oldest

votes

You could select <a> elements with jQuery attribute selector and change de value with .text() method. To change the text of the paragraph <p> you can select them and use again the .text() method.

Note if you have multiple places to change you could make a function to do this to avoid code duplication.

(function ( $ ) {

  $( '.visible-element' )

    .find( 'p' )

    .text( 'My new other text here' );



  $( '[href="tel:(+351) 217 907 610"]' )

    .attr( 'href', 'tel:(+999) 999 999 999' )

    .text( '(+999) 999 999 999' );

    

  $( '[href="mailto:yolo@mymail.com"]' )

    .attr( 'href', 'mailto:me@myself.com' )

    .text( 'me@myself.com' );

} ( jQuery ));

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

<div class="visible-element">

   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>

   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

   <span>|</span>

   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

edited Jan 3 at 0:21

answered Jan 3 at 0:06

Vinicius.Silva

137114

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%2f54013980%2fusing-javascript-to-replace-an-angular-div-with-different-elements%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Note if you have multiple places to change you could make a function to do this to avoid code duplication.

(function ( $ ) {

  $( '.visible-element' )

    .find( 'p' )

    .text( 'My new other text here' );



  $( '[href="tel:(+351) 217 907 610"]' )

    .attr( 'href', 'tel:(+999) 999 999 999' )

    .text( '(+999) 999 999 999' );

    

  $( '[href="mailto:yolo@mymail.com"]' )

    .attr( 'href', 'mailto:me@myself.com' )

    .text( 'me@myself.com' );

} ( jQuery ));

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

<div class="visible-element">

   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>

   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

   <span>|</span>

   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

edited Jan 3 at 0:21

answered Jan 3 at 0:06

Vinicius.Silva

137114

add a comment |

Note if you have multiple places to change you could make a function to do this to avoid code duplication.

(function ( $ ) {

  $( '.visible-element' )

    .find( 'p' )

    .text( 'My new other text here' );



  $( '[href="tel:(+351) 217 907 610"]' )

    .attr( 'href', 'tel:(+999) 999 999 999' )

    .text( '(+999) 999 999 999' );

    

  $( '[href="mailto:yolo@mymail.com"]' )

    .attr( 'href', 'mailto:me@myself.com' )

    .text( 'me@myself.com' );

} ( jQuery ));

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

<div class="visible-element">

   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>

   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

   <span>|</span>

   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

edited Jan 3 at 0:21

answered Jan 3 at 0:06

Vinicius.Silva

137114

add a comment |

Note if you have multiple places to change you could make a function to do this to avoid code duplication.

(function ( $ ) {

  $( '.visible-element' )

    .find( 'p' )

    .text( 'My new other text here' );



  $( '[href="tel:(+351) 217 907 610"]' )

    .attr( 'href', 'tel:(+999) 999 999 999' )

    .text( '(+999) 999 999 999' );

    

  $( '[href="mailto:yolo@mymail.com"]' )

    .attr( 'href', 'mailto:me@myself.com' )

    .text( 'me@myself.com' );

} ( jQuery ));

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

<div class="visible-element">

   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>

   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

   <span>|</span>

   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

edited Jan 3 at 0:21

answered Jan 3 at 0:06

Vinicius.Silva

137114

Note if you have multiple places to change you could make a function to do this to avoid code duplication.

(function ( $ ) {

  $( '.visible-element' )

    .find( 'p' )

    .text( 'My new other text here' );



  $( '[href="tel:(+351) 217 907 610"]' )

    .attr( 'href', 'tel:(+999) 999 999 999' )

    .text( '(+999) 999 999 999' );

    

  $( '[href="mailto:yolo@mymail.com"]' )

    .attr( 'href', 'mailto:me@myself.com' )

    .text( 'me@myself.com' );

} ( jQuery ));

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

<div class="visible-element">

   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>

   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

   <span>|</span>

   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

(function ( $ ) {

  $( '.visible-element' )

    .find( 'p' )

    .text( 'My new other text here' );



  $( '[href="tel:(+351) 217 907 610"]' )

    .attr( 'href', 'tel:(+999) 999 999 999' )

    .text( '(+999) 999 999 999' );

    

  $( '[href="mailto:yolo@mymail.com"]' )

    .attr( 'href', 'mailto:me@myself.com' )

    .text( 'me@myself.com' );

} ( jQuery ));

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

<div class="visible-element">

   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>

   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

   <span>|</span>

   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

(function ( $ ) {

  $( '.visible-element' )

    .find( 'p' )

    .text( 'My new other text here' );



  $( '[href="tel:(+351) 217 907 610"]' )

    .attr( 'href', 'tel:(+999) 999 999 999' )

    .text( '(+999) 999 999 999' );

    

  $( '[href="mailto:yolo@mymail.com"]' )

    .attr( 'href', 'mailto:me@myself.com' )

    .text( 'me@myself.com' );

} ( jQuery ));

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

<div class="visible-element">

   <p style="display: inline-block;" class="ng-binding">Need a hand?</p>

   <a href="tel:(+351) 217 907 610" class="ng-binding">(+123) 345 678 987</a>

   <span>|</span>

   <a href="mailto:yolo@mymail.com" class="ng-binding">yolo@mymail.com</a>

</div>

edited Jan 3 at 0:21

answered Jan 3 at 0:06

Vinicius.Silva

137114

edited Jan 3 at 0:21

answered Jan 3 at 0:06

Vinicius.Silva

137114

answered Jan 3 at 0:06

Vinicius.Silva

137114

answered Jan 3 at 0:06

Vinicius.Silva

137114

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