Develop Reference

How to dynamically add data from a span tag into a href tag

I think this may have a simple answer that I'm missing. The following tag inserts a TV show name into any page on my website:
<span class="show-title"></span>
what I'm trying to do is incorporate that data dynamically into a HREF URL link.
So, let's say on the page I'm on:
produced the result: GOTHAM.
I'd like to then use that data to create this url:
https://en.wikipedia.org/wiki/GOTHAM_(TV_series)
So I'm trying stuff like:
</span>_(TV_series)"> Link
or
Link
nothing working - any help would be awesome. Thanks!

You could do something like this:
In HTML
<a class="wikipedia-link">Link</a>
And your JavaScript function:
setLink(showTitle) {
var link = document.getElementsByClassName("wikipedia-link");
link.setAttribute("href", "https://en.wikipedia.org/wiki/" + showTitle + "_(TV_series)");
}

The html you use is wrong. span shouldn't be inside tag a. No tag inside another.
If your result is in javascript variable, you can set the url using jquery.
$('a').attr('href', "https://en.wikipedia.org/wiki/" + result + "_(TV_series)");
result variable is your desired result.

Although there's better ways of going about doing this, I'm going to answer the question in the context in which you presented it:
First, give the url link a class or ID so you can easily select it with JavaScript to change the href value later. Also, don't try to nest the span tag anywhere inside the a tag. Leave it outside.
<span class="show-title">GOTHAM</span>
Link
Next, in a JavaScript file or a <script> tag, define your variables:
var showTitle, showWikipediaLink, linkElement
Then, assign value to your newly defined variables
linkElement = document.querySelector('.show-wikipedia-link');
showTitle = document.querySelector('.show-title').innerText;
showWikipediaLink = 'https://en.wikipedia.org/wiki/' + showTitle + '_(TV_series)';
Finally, use JavaScript to update the href value of the link element to the show's Wikipedia link:
linkElement.href = showWikipediaLink;

How to change div content while generating a new URL - AJAX?

sorry for the basic question!
I currently have a website and I need a feature where the content of a div is replaced when a user clicks on a hyperlink
I've achieved this using the following:
Click here
<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
However, I have 2 quick questions - the in the div once the button has been clicked is written as a string in the JS - is it possible to pass in a HTML file that has this text?
I need to make it so that the new text has a new URL - is this possible? (e.g. once a user has clicked on the button, the text is displayed and a new direct URL is available)

I'm assuming you mean something like this:
$('#my-link').on('click', function() {
$('#my-div').load('/file_to_load.html');
$(this).attr('href', "new_url");
});
If you can provide a bit more clarity, I'll refine my answer!
Here's how this works.
jQuery looks for the dom element with the id #my-link, then on click the function block is fired. jQUery $.load will load the content of that url into the div with the id my-div, then change the href attribute of $(this), "this" being the button to "new_url".

How do I wrap text within a link tag using JavaScript/Jquery?

Here is my current code:
<a class="mg_label_7" href="/" shape="">Hello</a>
I want to have:
<a class="mg_label_7" href="/" shape=""><div id="hello">Hello</div></a>
So I can manipulate the background of the link text without changing the rest of the link areas text. Is there anyway to pinpoint this piece of text and insert a div or even a span using JavaScript/jQuery?
I've been trying to do this for around 3 hours, the closest I've got to achieving it is using
var elem = document.getElementsByTagName('a')[0];
var html = elem.innerHTML;
elem.innerHTML = '<div class="red">'+ html + '</div>'
which successfully targeted a link in my code and changed it to the span, but if I try to getElementsByTagName then getElementByClassName and use mg_label_7 it won't work. There are duplicates of the tag in the code and I want to target all of them.
I'm trying to manipulate a SharePoint web part so I'm not sure if it's stopping it from being edited.

You can use .wrapInner()
$('.mg_label_7').wrapInner('<div id="hello"></div>')

displaying html in div or iframe

I want to display my html string in this iFrame.
Actually I am confused whether it should be displayed in iFrame or Div.
Code:
$("body").append("\
<div id='wikiframe'>\
<div id='wikiframe_veil' style=''>\
<p>Loading...</p>\
</div>\
<iframe id='wikiIDframe'></iframe>\
</div>"
);
I want to display HTML which is in a string s="<body>....</body>
In this iFrame how do I Do it. Could any body help me with that.

You can append your string s to your iframe by doing the following:
jQuery
var s = '<body><div>hello</div></body>'; // example s string
var textBody = $(s); // make s into jquery object
var iframeBody = $('#wikiIDframe').contents().find('body'); // get the body from the iframe
iframeBody.append(textBody.html()); //append s html into iframe
Example

An iframe is used to embed another document within the current HTML document.Which means if you want see a webpage inside a webpage, u can use iframe.
<iframe src="http://www.stackoverflow.com"></iframe>
see this example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
If you want to display your text then use a div instead.In jquery you can use it like the below code
$("#your_div_id").html("yourstring here");

Has anyone thought about this?
HTML
<iframe id="iframe" style="width:500px;height:400px;"></iframe>
JS
var myHTML = "<div id='wikiframe'><div id='wikiframe_veil' style=''><p>Loading...</p></div><iframe id='wikiIDframe'></iframe></div>";
document.getElementById('iframe').src = 'data:text/html,<html><body>' + myHTML + '</body></html>';
Try it on http://jsfiddle.net/Kqd8R/1/

Mouseover ajaxload script

Im attempting to create a mouseover event for pictures on a page to load a summary of that picture into a div container called "contentarea". I'm new into coding, so please forgive my inaptitude. The code is below, but im not sure its going to work. Basically, I have 5 pictures of dogs on a webpage, and I want the mouseover event over a picture of the dog to load information from a seperate page called "content.html." The content that is loaded should load from a that has the same ID as the ID of the picture that is cursor is currently hovering over. The content will then load into a div that is below all the pictures called "contentarea." All pictures belong to the class dog. I had tried to adapt someone else's code, but to no effect.
<script>
function(){
$(.dog).mouseover(function(e) {
var dogId = $(this).data('id');
$("contentarea").load("content.html
# " + dogId + " ");
});
</script>

You can actually load another html file using ajax, that is not a problem like zongweil said on his comment, because the content you are loading is not dynamic.
You need to add to specify that .dog is a string by using '. Additionally, please explain what you are trying to achieve using the # dogId. Are there anchors on the html file that you are loading? I don't think you will achieve the expected effect by adding the anchor to the loaded html. If you want to load the info of just one dog, then create several content.html file each with the proper id like content1.html, content2.html, etc and use this:
<script>
$('.dog').mouseover(function(e) {
var dogId = $(this).data('id');
$("#contentarea").load("content" + dogId + ".html");
});
</script>
or instead use a single HTML file with the proper ids:
<div id="dogcontent1">
TEXT TEXT TEXT
</div>
<div id="dogcontent2">
TEXT TEXT TEXT
</div>
and then on the script use this:
<script>
$('.dog').mouseover(function(e) {
var dogId = $(this).data('id');
$("#contentarea").load("content.html #dogcontent"+ dogId );
});
</script>