jQuery: replace text inside link? [duplicate] - javascript

This question already has answers here:
change html text from link with jquery
(7 answers)
Closed 7 years ago.
I have the following html structure:
<div class="event tiny">
Something
</div>
And I want to replace the text of this link with "Anything" …
When doing this …
$('.event a').replaceWith("Anything");
… the text is replaced but also the link is gone.
When doing this … 
$('.event a').text().replaceWith("Anything");
… nothing happens.

Like this, if the new text is all the same.
$('.event a').text("Anything");
jQuery loops over the a elements, and replaces its content with the "Anything" text.

These suggestions, for setting the inner text & URL link within a a href didn't work for me (using JQuery v1.8.3)
Here's what did work though:
HTML
<a id="hrefAnalysisName" ></a>
JavaScript
$("a#hrefAnalysisName").attr("href", "/SomePage/ShowAnalysisDetails.aspx");
$("a#hrefAnalysisName").text("Show analysis");
Hope this helps!

You could also change the link by href if it's related to the URL.
$('a[href="/whatever"]').text("Anything");

You are able to get this result the next ways result will be the same:
HTML
<div class="event tiny">
<a class="html" href="/whatever">Something</a></br>
<a class="text" href="/whatever">Something</a></br>
<a class="replaceWith" href="/whatever">Something</a>
</div>
JS
$('.event a.html').html('Anything-html')
$('.event a.text').text('Anything-text')
$('.event a.replaceWith').replaceWith('<a class="replaceWith" href="/whatever">Anything-replaceWith</a>')

Related

How to make the links in Javascript code nofollow [duplicate]

This question already has answers here:
window.open() add a rel="nofollow" attribute
(3 answers)
Closed 5 years ago.
I want to make the links in this javascript code nofollow. Please help me how to do that.
<img src="https://example.png/>
According to https://developer.mozilla.org/en-US/docs/Web/API/Window/open you can add a third parameter in the window.open method that is a comma separated string with name value pairs - but rel is not supported...
Seems like html may be a good option.
<a href="www.example.com" rel="nofollow" target="_blank" >Link</a>
If you need to do this from js you could trigger a click on the link.

What is the purpose of this "javaScript:;"in hyperlink? [duplicate]

This question already has answers here:
What is href=javascript:;
(8 answers)
Closed 5 years ago.
What is the purpose of javascript:; in the href attributes of the hyperlinks?
<div data-trigger="spinner" id="spinner">
<span id="spinner-value"></span>
<input type="hidden" value="1" data-spin="spinner" data-rule="quantity" data-max="10">
-
+
</div>
the attribute href="javascript:;" is used to remove the behavior from the link.
If you would use eg. href="", the webpage would reload when you click the link. But with href="javascript:;" nothing will happen.
Later a script adds an event handler that will be executed when clicking this link.
EDIT: You need a or button elements as they are the semantic representatives for clickable objects.
To prevent links from refreshing webpage/redirecting you once clicked.
the purpose of "javascript:;" have save meaning with "javascript:void(0)"
Read here : javascript void functions

jQuery - unable to store few html elements in variable [duplicate]

This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 8 years ago.
Hello everyone,
I'm a little bit confused here, trying to store couple of html elements into a variable.
But when I try to print out the content of my variable, some elements are not being displayed. is that some kind of magic :) or what I'm doing wrong exactly?
This is then causing issues in my other functions, which are trying to find certain elements in the variable.
var template = $(" <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div>");
console.log(template.html());
Result:
<span id="item_stats_info"> <div id="item_name"> </div> </span>
Could you guys advise me on what's the best way to store html elements in a variable?
Thansk in advance,
Alex
The .html() method of jQuery returns the HTML inside of the element, since you need to get the outer HTML, you can try wrapping it in another div:
var template = $("<div> <div class='item'><span id='item_stats_info'> <div id='item_name'> </div> </span> </div> </div>");
console.log(template.html());
Use this to get the full html, not the inner html....
console.log(template.prop('outerHTML'));

How to obtain the text content between two anchor tags [duplicate]

This question already has answers here:
Jquery change text between two elements
(9 answers)
Closed 9 years ago.
I have a html content as shown below.Is there any way to obtain using Jquery the text in between the two anchor tags without wrapping any div or span tags around the text named "user1" .I need the output as "user1". Could someone please help me.
<div class="test 1">
<input id="field1" type="hidden" value="terminal">
<a class="Prev" title="prevoius" href="#">previous</a>
User1
<a class="btnNext" title="next" href="#">next</a>
</div>
Something like this should work:
var theText = $('.Prev')[0].nextSibling.textContent || $('.Prev')[0].nextSibling.innerText;
Here's a fiddle
Following code would give you the desired text.
var ch1 = $("a[class=Prev]");
var ch2 = $("a[class=btnNext]");
var contents = ch1.parent().contents();
contents.slice(contents.index(ch1) + 1, contents.index(ch2)).text();
Try this: http://api.jquery.com/contents/
contents returns the "children of each element in the set of matched elements, including text and comment nodes". It should return four children: input, a, text, a.
You can do it with nextUntil.
http://api.jquery.com/nextUntil/

print javascript variable in HTML between quotes

I've got a variable and I want to display the value of it in a specific place of my HTML.
Much like +variable+ within javascript.
My setup is as followed:
The HTML:
short version:
addthis:url="http://example.com/script.php?code="
the HTML full version:
<div class="addthis_toolbox addthis_default_style "
addthis:url="http://example.com/script.php?code="
addthis:title="An Example Title"
addthis:description="An Example Description">
Share
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
I would like to "print" the value of my variable after the = so it would result in:
addthis:url="http://example.com/script.php?code=myVar"
I had found document.write but this won't work since I will have to place the script tags between quotes.
Hope someone can help me out!
String concatenation
addthis:url="http://example.com/script.php?code=" + myVar;
Try to use a placeholder and replace it with jquery:
https://stackoverflow.com/a/7480394/1380486
You wont be able to do it the way you want (with document.write). Even if you solve the quote problem, you will still have to have script tags inside of your div tags like this:
HTML
<div addthis:url=<script>document.write("http://example.com/script.php?code=myVar")<script>>
This simply will not work.
With jQuery you could select that element and add the attribute when the dom is ready.
JavaScript
$(document).ready(function(){
$(".addthis_toolbox").attr("addthis:url","http://example.com/script.php?code=myVar")
});

Categories