Solved

Trying to Add a link within a div tag with javascript

Posted on 2013-05-23
4
242 Views
Last Modified: 2013-05-28
Hello,

I have been tasked with adding a link to our LMS (learning management system). We do not have accesses to the html/php files, but the company does allow us to include our own js and css files. I have created a js file to search through all the div's on the page to find the one I am looking for, and than add the link within the div. Code is below.

var div = document.getElementByClassName("login-options");
for(var i=0; i<divs.length; i++) {
	if (div == "login-options")
	{
		var a = document.createElement('a');    
		a.title = "Canvas Student Resource Center";            
		a.innerText = a.title;            
		a.href = "https://coconino.instructure.com/courses/923533";            
		div.appendChild(a);
	}
}

Open in new window


Thanks,

Neo
0
Comment
Question by:Morgan
  • 2
4 Comments
 
LVL 42

Accepted Solution

by:
sedgwick earned 200 total points
ID: 39192729
using jquery:
var link = "<div> <a title=\"Canvas Student Resource Center\" href=\"https://coconino.instructure.com/courses/923533\">Canvas Student Resource Center</a></div>";
$('.login-options').append(link);

Open in new window

0
 
LVL 2

Assisted Solution

by:laurent_roy
laurent_roy earned 300 total points
ID: 39193641
Hello,

- if it is implemented in your browser, the function is document.getElementsByClassName with an "s" at Elements. But because it's not implemented in all browsers I recommend you to use document.getElementsByTagName . You will get more results but you will avoid problems. If the div you want to retrieve has an id, you can use document.getElementById (without s).
- you made a confusion between div and divs
- div == "..." doesn't mean anything. Do you mean div.className="..." ? (if you use document.getElementsByClassName, you dont't need anything because you already only retrieve divs with className "..."
- a.innerText doesn't work, use a.innerHTML instead

to sum up :

var divs = document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++) {
	if (divs[i].className == "login-options")
	{
		var a = document.createElement('a');    
		a.title = "Canvas Student Resource Center";            
		a.innerHTML = a.title;            
		a.href = "https://coconino.instructure.com/courses/923533";            
		divs[i].appendChild(a);
	}
}

Open in new window

best regards

Laurent
0
 
LVL 1

Author Comment

by:Morgan
ID: 39196644
Thank you both. Because of the long weekend I'll take a look at both solutions on Tuesday to see which will fit my needs, though I would assume both would?

Laurent, thank you for taking the time to explain what I was doing wrong. It is appreciated!
0
 
LVL 1

Author Comment

by:Morgan
ID: 39202059
Hello Laurent & Sedgwick,

Come to find out I had to go this route (jQuery still):

jQuery(function($){
  $('#pseudonym_session_remember_me').parent().append('<p><a id="training_course" href="MY_LINK"><b>TITLE_OF_LINK</b></a>');
});

Open in new window


I have gone ahead and rewarded points to both of you, with Laurent receiving more as he/she went into more detail on what was wrong with my code.

Again than you both for your help!
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question