I am using the following js to replace text in a class called .relatedactivities with another text. In the example below the text is Related Activities.
<script>
$(document).ready(function(){
$(".relatedactivities").text('Related Activities');
})
</script>
How can I replace the text "Related Activities" with the HTML code below instead?
<h1 class="GreenLrg" align="center">Related Activities</h1>
<div align="center"> <a href="/activities/kauai/ziplineadventures/koloa-zipline.htm">
<div class="CatBox"><img src="/Portals/0/1koloa-zipline-tour-2.jpg" height="174" width="231"><span>Koloa Zipline Tour</span></div>
</a> <a href="/activities/kauai/ziplineadventures/zip-n-dip-expedition.htm">
<div class="CatBox"><img src="/Portals/0/2zip-n-dip-2.jpg" height="174" width="231"><span>Zip N' Dip Expedition</span></div>
</a> <a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
<div class="CatBox"><img src="/Portals/0/3kipu-zipline-safari-2.jpg" height="174" width="231"><span>Kipu Zipline Safari</span></div>
<p></p>
</a></div><a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
I do not suggest you hard code HTML in your JavaScript, as it will become extremely difficult to maintain in the long run.
In a perfect world, you can call a backend service via AJAX which would return HTML, or you could use a framework or library like AngularJS or React.JS.
Now, to answer you question, simply change .text() for .html('<html here/>').
You'll need to use .html() instead of .text():
$(".relatedactivities").html('<h1 class="GreenLrg" align="center">Related Activities</h1>...');
Use: html() like
$(".relatedactivities").html('your code html');
This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.
For more about that, check http://api.jquery.com/html/
Related
I've got div on my page with id attribute with escaped HTML for example:
<div class="myDiv" id="<script>alert(1)</script>></div>
Can I with JavaScript and JQuery take the value of this attribute as it is coded? Using just $('.myDiv').attr('id) im just getting <script>alert(1)</script> and I have to know if this HTML has already been escaped :O
Just need to get this attribute in JS as <script>alert(1)</script>
https://i.stack.imgur.com/vXmVK.png
You might consider something safer. You must also wrap it properly. Your example is missing a closing Quote.
<div class="myDiv" id="myDiv-1" data-script="alert(1)"></div>
You could also do it this way.
<div class="myDiv" id="myDiv-1" data-script="<script>alert(1)</script>"></div>
Again this is not good practice. You may want to consider another method.
Can I concatenate two strings in HTML?
I want to achieve the following functionality-
go to the 1st DIV tag.
It could have been done using document.write() in javascript but I want to know if there is any concatenation functionality in HTML itself.
No, there isn't.
HTML is markup, it is not turing complete.
One (primitive) way to achieve this with JavaScript would be
<a href="#"
onclick="window.location.hash='#'+document.getElementsByTagName('div')[0].id; return false;">
go to the 1st DIV tag.
</a>
But since those links are useless when JS is not available, they should probably only be generated by JS in the first place.
No, there isn't. HTML is markup.
You should use dynamic HTML and JavaScript to achieve this.
you can do this by using this.href in java script
<a href="#" onload="this.href=this.href+document.getElementsByTagName('div')[0].id;" >
ex
<a href="targetWithInDoc.html" onload="this.href=this.href+'#block1';" >block 1</a>
This can't be done in the way you're attempting, but if JavaScript is running on the client anyway then you can still achieve the functionality you're looking for. You just need to separate the tag from the script:
Go to the first DIV tag
<script type="text/javascript">
document.getElementById('someID').href = '#' + document.getElementsByTagName('div')[0].id;
</script>
I know it wont help u now but I'm posting this for others who will come to this question by searching
we can achieve it this way :
<a href='<%#String.Concat("string1", "string2")%>'></a>
I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/
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")
});
I have a JavaScript string containing HTML like this:
<div>
<div class="a">
content1
</div>
content 2
<div class="a">
<b>content 3</b>
</div>
</div>
and I want to remove the div's of class="a" but leave their content.
In Python I would use something like:
re.compile('<div class="a">(.*?)</div>', re.DOTALL).sub(r'\1', html)
What is the equivalent using Javascript regular expressions?
Why don't you use proper DOM methods? With a little help from jQuery, that's dead simple:
var contents = $('<div><div class="a">content1</div>content 2<div class="a"><b>content 3</b></div></div>');
contents.find('.a').each(function() {
$(this).replaceWith($(this).html());
});
You can achieve it with regular expressions in JavaScript
var html = '<div> <div class="a"> content1 </div> <div class="a"> content1 </div> ... </div>';
var result = html.replace(/<div class="a">(.*?)<\/div>/g, function(a,s){return s;});
alert(result);
RegExp method replace takes two parameters - first one is the actual re and the second one is the replacement. Since there is not one but unknown number of replacements then a function can be used.
If you want to do this in Javascript, I'm presuming that you are running it in a web browser, and that the 'javascript string' that you refer to was extracted from the DOM in some way.
If both of these case are true, then I'd say that it would be a good idea to use a tried and tested javascript library, such as JQuery (There are others out there, but I don't use them, so can't really comment)
JQuery allows you to do on-the-fly DOM manipulations like you describe, with relative ease...
$('div.a').each(function(){$(this).replaceWith($(this).html());});
JQuery is definitely one of those tools that pays dividends - a failry short learning curve and a whole lot of power.