How can I create a linkable heading using Javascript? - javascript

I want to create a linkable heading element by using Javascript. So far it creates an element but it doesn't contain link. Can someone tell me what's wrong?
function create2() {
var heading = document.createElement("H2");
var link = document.createElement("a");
link.href = "https://www.google.com";
heading.innerHTML = "Heading Test";
heading.appendChild(link)
document.body.appendChild(heading);
}
create2();

I've updated your code, you can use appendChild on heading.
Note: I am also using link.innerText instead of heading.innerHTML.
function create2() {
var heading = document.createElement("H2");
var link = document.createElement("a");
link.href = "https://www.google.com";
link.innerText = "Heading Test";
heading.appendChild(link)
document.body.appendChild(heading);
}
create2();

You need to add text to the link.
This is a bit ugly, but explains what you need.
function create2() {
var heading = document.createElement("H2");
var link = document.createElement("a");
var text = document.createTextNode('link text');
link.appendChild(text);
link.href = "https://www.google.com";
heading.innerHTML = "Heading Test ";
heading.appendChild(link)
document.body.appendChild(heading);
}
create2();

Related

Javascript - is there at good way to create a link

I have a field i my webshop that i would like to change to a link
<span id="m-product-customdata-data-" class="m-product-customdata-data-title">http://www.coaxconnectors.dk/searchresultcable.asp?CCType=-TL505&action=searchConnector </span>
Is there any way i Javascript to change this to a url?
Use this it will help you.
var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);

Create links inside a list

I have a list looking like this
<li class="list">text1</li>
<li class="list">text2</li>
<li class="list">text3</li>
and want to make the text to links, with this result using JavaScript
<li class="list>text1</li>
<li class="list>text1</li>
<li class="list>text1</li>
I already did this, but don't know how to do next?
var link1 = document.createElement("a");
link.href = "#text1"
Is it possible to make a loop or something similar, so that I don't have to write the same code for all three links?
Yes, first you need to find all of the list class tags and loop through them.
var lists = document.getElementsByClassName("list");
for(var i=0; i<lists.length; i++) {
Next find the text of the current list element, store it in a variable and then clear the element's text.
var text = lists[i].textContent;
lists[i].textContent = "";
Third, create the a element and make the textContent of the a element the text of the current list and the href, the current text plus the # sign.
var a = document.createElement("a");
a.href = "#"+text;
a.textContent = text;
And finally append the a to the current list element.
lists[i].appendChild(a);
var lists = document.getElementsByClassName("list");
for(var i=0; i<lists.length; i++) {
var text = lists[i].textContent;
lists[i].textContent = "";
var a = document.createElement("a");
a.href = "#"+text;
a.textContent = text;
lists[i].appendChild(a);
}
<li class="list">text1</li>
<li class="list">text2</li>
<li class="list">text3</li>
`
Iterate over the list elements adding the anchor HTML as a text replacement:
[].forEach.call(document.querySelectorAll('.list'), function (el) {
var txt = el.textContent;
el.innerHTML = '' + txt + '';
});
DEMO

Taking tab example from fiddle ans use in my project

http://jsfiddle.net/738wtmhs/1/
using above example in fiddle in my own project: for the purpose of this exercise I am using DOM methods to create and append the elements.
function GetFeatureProperties(feature) {
//add header to 1st FirstTabContent
var featureHeader = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
var FirstTabContent = document.createElement('div');
FirstTabContent.id = "tabs-1";
FirstTabContent.innerHTML = featureHeader;
//Second Tab
var SecondTabContent = document.createElement('div');
SecondTabContent.id = "tabs-2";
var newImage = document.createElement("img");
newImage.src = "http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg";
newImage.width = "100";
newImage.height = "100";
SecondTabContent.appendChild(newImage);
//add li and ul
var DivHolding2Tabs = document.createElement('div');
DivHolding2Tabs.class = "shoptab";
var header2 = document.createElement('h2');
header2.innerHTML = "Feature";
DivHolding2Tabs.appendChild(header2);
var _ul = document.createElement('ul');
var _anchor1 = document.createElement("a");
_anchor1.href = "#tabs-1";
_anchor1.innerHTML = "Info";
var _li1 = document.createElement('li');
_li1.appendChild(_anchor1);
var _anchor2 = document.createElement("a");
_anchor2.href = "#tabs-2";
_anchor2.innerHTML = "Images";
var _li2 = document.createElement('li');
_li2.appendChild(_anchor2);
_ul.appendChild(_li1);
_ul.appendChild(_li2);
DivHolding2Tabs.appendChild(_ul);
DivHolding2Tabs.appendChild(FirstTabContent);
DivHolding2Tabs.appendChild(SecondTabContent);
var jelm = $(DivHolding2Tabs); //convert to jQuery Element
var htmlElm = jelm[0]; //convert to HTML Element
var OuterDiv = document.createElement('div');
OuterDiv.id = "loc-list";
OuterDiv.appendChild(htmlElm);
return OuterDiv.innerHTML;
}
and this looks like the image seen below....if I click on the link 'image' the page jumps a bit but nothing happens and nothing happens when I press 'info' also I have included the CSS in my project so why arnt the tabs showing and yes I am using jquery ui 1.10.3.custom.js
---------------------------------------------------------------------------------------------
UPDATE
<ul id="list"><li><div><h2>Feature</h2><ul><li>Info</li><li>Images</li></ul><div id="tabs-1"><center><b> <font color="FF6600"> Feature Properties </font> </b> </center> <br></div><div id="tabs-2"><img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="100" height="100"></div></div></li></ul>
Also changed from jquery 1.10.3 custom to jquery 1.11.2.custom with all the downloaded tabs selected
If you look at this fiddle, I managed to make it work.
Here's the possible problems
1) I changed return OuterDiv.innerHTML because I needed the <div id="loc-list"> to be part of the code to initialize it. You gave it an id so my guess is you wanted it to be included but by doing innerHTML, you didn't get it.
2) Once your function returns, you need to initialize the tabs with $('#loc-list').tabs();

Removing divs dynamically

i have to add multiple thumbnail images(501.jpg,502.jpg etc. added in the gengrid function) in a page each of which opens another image(port.jpg) on click and on clicking another thumbnail image the port.jpg has to be removed. The problem is that the removeChild is not working in this case. Can anyone please help...
here is the code
<script type="text/javascript">
var lastper=null;
function gengrid()
{
var i=0;
var num_stud=8;
var newdiv;
var divIdName;
var maindiv;
for(i=1;i<=num_stud;i++)
{
newdiv = document.createElement('div');
divIdName = '50'+i;
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('onclick','addit('+i+')');
newdiv.innerHTML = '<img src=50'+i+'.jpg alt="a"></img>';
maindiv=document.getElementById('main');
maindiv.appendChild(newdiv);
}
}
gengrid();
function addit(picno)
{
var person = document.getElementById('50'+picno);
if(lastper)
lastper.removeChild('portfolio');
var newdiv = document.createElement('div');
var divIdName = 'portfolio';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
person.appendChild(newdiv);
alert(picno+''+lastper.id+person.id);
lastper = document.getElementById('50'+picno);
}
</script>
The main issue is that you're passing a string to the removeChild call. Using
lastper.removeChild(document.getElementById('portfolio'));
instead will fix that problem.
The alert you have is a secondary issue. It'll fail the first time through because "lastper" is null and so doesn't have an id property.
if(lastper){
lastper.removeChild('portfolio');return;}
I don't believe this is a valid ID for an element. An ID must begin with a letter.
lastper = document.getElementById('50'+picno);
What are valid values for the id attribute in HTML?
Try this
function addit(picno)
{
var person = document.getElementById('50'+picno);
lastper = document.getElementById('50'+picno);
if(lastper)
lastper.removeChild('portfolio');
var newdiv = document.createElement('div');
var divIdName = 'portfolio';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
person.appendChild(newdiv);
alert(picno+''+lastper.id+person.id);
}

How do I add a link to a span of text using JavaScript?

I'm trying to add a link to a span of text using JavaScript below. Please could you help me with this issue.
<div id="features">
<h2>Features</h2>
<div id="emma2011_left">
<h2>Image of the Day</h2>
<div id="dImg">
<div id="dailyimg" class="feature"></div>
<div id="title" class="feature"></div>
<div id="caption" class="feature"></div><br />
<span id="span" class="feature"><a id="pidlink">Link to the object</a></span>
</div>
</div>
<script type="text/javascript">
...
link = document.createElement("a");
link.setAttribute("href", "http://example.com/index.aspx?objectid=" + oTodayImage.pid);
var span = document.createElement("span");
var txt = link.href;
var textNode = document.createTextNode(txt);
span.appendChild(textNode);
</script>
You're missing one step. You added the textnode to the span instead of the link. Then you should've put the link into the span...
var link = document.createElement("a");
link.setAttribute("href", "http://www.google.com");
var span = document.createElement("span");
var txt = link.href;
var textNode = document.createTextNode(txt);
link.appendChild(textNode);
span.appendChild(link);
//example of setting the link into a div on the page...
document.getElementById("div").appendChild(span);
$("<a/>").attr({href:"http://google.com"}).html("google").appendTo("#span");
here is the fiddle http://jsfiddle.net/wYdZb/1/
Instead of creating a text node you can also set the innerHTML of the link. And finally after you create this span you need to append it to some container, for now I have appended it to body.
Working demo
var link = document.createElement("a");
//here in the attribute value I have harded objectid=1 for testing
//replace it by your code to get the id and append it
link.setAttribute("href", "http://abc.org/index.aspx?objectid=1");
link.innerHTML = "Link to the object";
var span = document.createElement("span");
span.appendChild(link);
document.body.appendChild(span);
(function() {
var _a, _div, _span;
_span = document.createElement("span");
_a = document.createElement("a");
_div = (document.getElementsByTagName("div"))[0];
_a.setAttribute("href", "http://abc.org/index.aspx?objectid=");
_a.innerHTML = "Link to the object";
_span.appendChild(_a);
_div.appendChild(_span);
}).call(this);
to get the div element use some method;
must append span to the div element to show all elements.
example:http://jsfiddle.net/bz6bu/
use jquery's append:
var href = "http://abc.org/index.aspx?objectid=" + oTodayImage.pid;
$('#span').append("<a href='" + href + "'>test</a>") ;

Categories

Resources