We Keep Coding

Display html link with javascript

In some part of an html page, I have a link with the following code :
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
I would like to automatically display the same link in another part of the same page by using a javascript.
What would be the script to insert in my page ?
Thank you in advance for any help in this matter.
Patrick

Try this:
myVar = document.getElementById("idname");
varLink = (myVar.attributes.href);

As son as you know the target id:
<div id="targetID">New Link: </div>
<div id="targetID2">New Link 2: </div>
And If you are using jQuery you can do like this:
var link = $("#idname").clone();
link.attr("id",link.attr("id") + (Math.random() * 10));
$("#targetID").append(link);
If not:
var link = document.getElementById("idname");
var newLink = document.createElement("a");
newLink.href = link.href;
newLink.className = link.className;
newLink.innerHTML = link.innerHTML;
newLink.id = link.id + (Math.random() * 10);
document.getElementById("targetID2").appendChild(newLink);
See this Example

<script>
window.onload = function() {
// get data from link we want to copy
var aHref = document.getElementById('idname').href;
var aText = document.getElementById('idname').innerHTML;
// create new link element with data above
var a = document.createElement('a');
a.innerHTML = aText;
a.href = aHref;
// paste our link to needed place
var placeToCopy = document.getElementById('anotherplace');
placeToCopy.appendChild(a);
}
</script>
Use code above, if you want just to copy your link to another place. JSFiddle

First, I want to point out that if you will just copy the element that will throw an error because the copied element will have the same id of the first one, so if you will create a copy of your element you don't have to give it the same id.
Try this code:
function copyLink(newDestination){
var dest=document.getElementById(newDestination);
var newLink=document.createElement("a");
var myLink=document.getElementsByClassName("classname")[0];
newLink.href=myLink.href;
newLink.className = myLink.className;
newLink.innerHTML = myLink.innerHTML;
newDestination.appendChild(newLink);
}
The newDestination parameter is the container element of the new Link.
For example if the new Container element has the id "div1":
window.onload = function() {
copyLink(div1);
}
Here's a DEMO.

Thank you very much to everyone for so many prompt replies.
Finally, I was able to use Jquery.
So, I tried the solution given by Andrew Lancaster.
In my page, I added the codes as follows, in this order :
1-
<span id="span1">
<a class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
and further down the page :
2-
<script type="text/javascript">
var span1val = $('#span1').html();
$('#span2').html(span1val);
</script>
Therefore, the two expected identical links are properly displayed.
But, unfortunately, I forgot to say something in my initial request:
the original link is in the bottom part of my page
I would like to have the duplicated link in a upper part of my page
So, would you know how to have the duplicated link above the original link ?
By the way, to solve the invalid markup mentioned by David, I just deleted id="idname" from the original link (that I could ignored or replaced by other means).
Thank you again in advance for any new reply.
Patrick

Using Jquery you could wrap your link in a span with an ID and then get the value of that ID and push it into another span id.
HTML
<span id="span1">
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
jQuery
var span1val = $('#span1').html();
$('#span2').html(span1val);
Example can be found here.
http://jsfiddle.net/3en2Lgmu/5/

Use a JavaScript variable as part of a href link in HTML

Part of my code:
<p id="demo">{$value.file_name}</p>
<script type="text/javascript">
var str = document.getElementById("demo").innerHTML;
var res = str.replace("/var/www/html/biology/demo", "");
document.getElementById('para').innerHTML = res;
</script>
<a href="#para" id='para'>Download</a>
This part of the url will already be present: "a.b.c.d.edu/bio/cluster/"
$value.file_name contains "/var/www/html/biology/demo/files/mpijobs/107/mothership/data/job107_0_0_output.tif"
After the script, "para" contains the edited path which is "/files/mpijobs/107/mothership/data/job107_0_0_output.tif" (the removal of "/var/www/html/biology/demo")
The code:
Download
provides a clickable link to "a.b.c.d.edu/bio/cluster//var/www/html/biology/demo/files/mpijobs/107/mothership/data/job107_0_0_output.tif"
and what I want to do is replace "{$value.file_name}" inside the brackets with "para" (and what it represents) so that the download link is linked to
"a.b.c.d.edu/bio/cluster//files/mpijobs/107/mothership/data/job107_0_0_output.tif"

Sorry, I misunderstood.
If the a href attribute is set like so:
Download
You can use in the javascript:
str.setAttribute("href", res);
EDIT:
Ok I got it. Sorry about this strenuous exercise. Here's what you should write:
<p id="demo">{$value.file_name}</p>
<a href="#para" id='para'>Download</a>
<script type="text/javascript">
var str = document.getElementById("demo").innerHTML;
var res = str.replace("/var/www/html/biology/demo", "");
para = document.getElementById('para');
para.href = res;
</script>

document.write erase buttons

I have a html page with buttons:
<INPUT TYPE=BUTTON VALUE="b1" onclick="init1()" >
init1:
document.innerHTML = "<object type='application/x-app' id='plugin' width='0' height='0' > </object>"
When I press the button b1 it erase the page and it just blank.
What am I doing wrong?
10xs,
Nir

Use appendChild on body instead of replacing (=). Your button will not get erased.
var object = document.createElement("object");
object.innerHTML = "<object...";
document.body.appendChild(object);

You need to adres proper anchor (place) in your code (in the DOM tree).
Try this instead:
var my_anchor = document.getElementById('element_in_DOM');
my_anhor.innerHTML = "<object type='application/x-app' id='plugin' width='0' height='0' > </object>"

Of course it erases the page. When you modify the .innerHTML of the -entire document-, and replace it with something else, that's what happens.
If you want to append that tag onto the document however, that's a different story. I would suggest the following to do such:
var your_element = document.createElement('object');
your_element.type = 'application/x-app';
your_element.id = 'plugin'
your_element.width = 0;
your_element.height = 0;
document.body.appendChild(your_element);​
DEMO

JavaScript Error when Showing iFrame

I am passing values within a url to an iframe - on a coldfusion website. However, the iframe isn't appearing on the page. I have a method that I have used on a previous website, non-coldfusion, and this works perfectly - which leads me to believe that the issue is caused by the site being coldfusion. I have no experience with ColdFusion.
Hopefully, if I show you the code I am using to pull in the iFrame and values, somebody may be able to help me out - which would be greatly appreciated....
<script language="javascript">
function gup(name){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) return ""; else return unescape(results[1]);
}
function prepare() { document.getElementById('EMAIL_FIELD').innerHTML = gup('email');
var email = gup('email');
document.getElementById('FIRSTNAME_FIELD').innerHTML = gup('firstname');
var firstname = gup('firstname');
document.getElementById('LASTNAME_FIELD').innerHTML = gup('lastname');
var lastname = gup('lastname');
document.getElementById('COUNTRY_FIELD').innerHTML = gup('country');
var country = gup('country');
document.getElementById('frame').innerHTML = "<iframe src='http://webe.emv3.com/tennisexpress/pref_center/Tennis_SP.html?email="+email+"&firstname="+firstname+"&lastname="+lastname+"&country="+country+"' width='750' scrolling='no' height='1000' frameborder='0' ></iframe>";
}
The body tag has the following onLoad function:
<body onLoad="javascript:prepare();">
and the iFrame is called as:
<div id="frame"></div>
if you use the following url, you will see that the iFrame is not shown:
http://www.tennisexpress.com/newsletter_signup.cfm?email=grozanski#emailvision.com&zipcode=11206&source=homepage&firstname=Gary&lastname=Rozanski&country=ny
Am I missing something obvious? Can anyone recommend any changes?

Firebug shows a JavaScript error:
document.getElementById("FIRSTNAME_FIELD") is null
[Переривати на цій помилці] documen...IELD').innerHTML = gup('firstname');
Possibly it's the reason of iframe not being created.

Changing data content on an Object Tag in HTML

I have an HTML page which contains an Object tag to host an embedded HTML page.
<object style="border: none;" standby="loading" id="contentarea"
width="100%" height="53%" type="text/html" data="test1.html"></object>
However, I need to be to change the HTML page within the object tag. The current code seems to create a clone of the object and replaces the existing object with it, like so:
function changeObjectUrl(newUrl)
{
var oContentArea = document.getElementById("contentarea");
var oClone = oContentArea.cloneNode(true);
oClone.data = newUrl;
var oPlaceHolder = document.getElementById("contentholder");
oPlaceHolder.removeChild(oContentArea);
oPlaceHolder.appendChild(oClone);
}
This seems a rather poor way of doing this. Does anyone know the 'correct' way of changing the embedded page?
Thanks!
EDIT: In response to answers below, here is the full source for the page I am now using. Using the setAttribute does not seem to change the content of the Object tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script language="JavaScript">
function doPage()
{
var objTag = document.getElementById("contentarea");
if (objTag != null)
{
objTag.setAttribute('data', 'Test2.html');
alert('Page should have been changed');
}
}
</script>
</head>
<body>
<form name="Form1" method="POST">
<p><input type="button" value="Click to change page" onclick="doPage();" /></p>
<object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="test1.html"></object>
</form>
</body>
</html>
The Test1.html and Test2.html pages are just simple HTML pages displaying the text 'Test1' and 'Test2' respectively.

You can do it with setAttribute
document.getElementById("contentarea").setAttribute('data', 'newPage.html');
EDIT:
It is also recommended that you use the window.onload to ensure that the DOM has loaded, otherwise you will not be able to access objects within it.
It could be something like this:
function changeData(newURL) {
if(!document.getElementById("contentarea"))
return false;
document.getElementById("contentarea").setAttribute('data', newURL);
}
window.onload = changeData;
You can read more about window.onload here

This seems to be a browser bug, setAttribute() should work. I found this workaround, which seems to work in all browsers:
var newUrl = 'http://example.com';
var objectEl = document.getElementById('contentarea');
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + newUrl + '"');

The above solutions did not work properly in Firefox, the Object tag doesn't refresh for some reason. My object tags show SVG images.
My working solution for this was to replace the complete Object node with a clone:
var object = document.getElementById(objectID);
object.setAttribute('data', newData);
var clone = object.cloneNode(true);
var parent = object.parentNode;
parent.removeChild(object );
parent.appendChild(clone );

Here's how I finally achieved it. You can do
document.getElementById("contentarea").object.location.href = url;
or maybe
document.getElementById("contentarea").object.parentWindow.navigate(url);
The Object element also has a 'readyState' property which can be used to check whether the contained page is 'loading' or 'complete'.

I found a very simple solution that also works in Chrome. The trick is to make the object (or a parent element) invisible, change the data attribute, and then make the object visible again.
In the code below, it is assumed that object_element is the object element and parent_element is the parent, and url is the url of the data.
parent_element.style.display = 'none'; // workaround for Chrome
object_element.setAttribute('data', url);
parent_element.style.display = '';

Following user2802253, I use this one on Safari and Firefox, which also forces a redraw. (sorry, not enough reputation to post as a simple comment).
theObject.style.visibility = null;
theObject.setAttribute("data", url);
theObject.style.visibility = "visible";

var obj = document.getElementById("pdfDoc");
obj.setAttribute('data', newPdf);
worked on Chrome version 54 and Safari, but didn't work on IE 11
what worked on them all
var obj = document.getElementById("pdfDoc");
obj.setAttribute('data', newPdf);
var cl = obj.cloneNode(true);
var parent = obj.parentNode;
parent.removeChild(obj);
parent.appendChild(cl);

This snippet did the job in my case
var object = document.getElementById(objectID);
object.setAttribute('data', newData);
var clone = object.cloneNode(true);
var parent = object.parentNode;
parent.removeChild(object );
parent.appendChild(clone );

<div id='myob'>
<object style="border: none;" standby="loading" id="contentarea"
width="100%" height="53%" type="text/html" data="test1.html"></object>
</div>
$('#myob').html($('#myob').html());

Changing the data attribute should be easy. However, it may not work perfectly on all browsers.
If the content is always HTML why not use an iframe?

Antoher way of doing it, you could embed the object in a DIV
var newUrl = 'http://example.com';
var divEl = document.getElementById('divID');
var objEl = document.getElementById('objID');
objEl.data = newUrl;
// Refresh the content
divEl.innerHTML = divEl.innerHTML;

I think this is a better way to achieve your objective.
Html:
<div id="mytemplate"><div>
Js:
function changeTemplate(t){
var mytemplate = document.getElementById("mytemplate");
mytemplate.innerHTML = '<object type="text/html" data=' + t + '></object>';
}
changeTemplate('template.html');
changeTemplate('whatever.html');

var content_area = document.getElementById("contentarea");
content_area.data = newUrl;
Refreshes object in Chrome Version 42.0.2311.90 m

the main reason of this issue is using "/" in local files.
The Wrong Code :
var obj = document.getElementById("hostedhtml");
obj.setAttribute('data', "pages\page2.html");
The Right Code :
var obj = document.getElementById("hostedhtml");
obj.setAttribute('data', "pages\\page2.html");