How to modify style to a link in JavaScript? - javascript

How can I make the text in the div (the content of the variable name) become a link? In other words: To change the style to "a" without using jQuery.
var newtit=document.createElement('div');
newtit.id=name; // name is a variable
newtit.innerHTML= name;
document.getElementById("w3c").appendChild(newtit);

Just do what you did with a div, but instead of creating a div, create an anchor element. Add the link you want as the href-attribute.
var newtit=document.createElement('a');
newtit.href = "http://www.google.com"
newtit.innerHTML= "linkylink";
document.getElementById("w3c").appendChild(newtit);
Based on your content, first create the div then append the anchor element to it
var tab = document.createElement("div");
tab.id = "TabX";
document.getElementById("w3c").appendChild("tab");
var link = document.createElement("a");
link.href = "#TabX";
link.innerText = "Tab XX";
document.getElementById("TabX").appendChild("tab");
or just write the anchor straight to the inner HTML
tab.innerHTML = "<a href='#TabX'>Tab XX</a>"

Related

Create list with hyperlink (document fragments) as text string

I am totally new at javascript and am trying to create a dynamic list in JavaScript that is both a hyperlink to and shows the text string of a tag in my html code that has the id = v1. Kind of like a menu to different parts of that same webpage.
I have tried to do this using document fragments (https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#document_fragments) but it is not working and I don't have any idea of how to insert the text string of the in the "menu".
Here is part of my code:
var container = document.getElementById("contentarea");
var header = document.getElementById("v1");
for (i = 0; i < length.header; i++) {
$(document.createElement("li")).li;
$(document.createElement("a")).link.append(li)( {
href: "#v1"
})
list.appendChild(li);
container.appendChild(list)
}
You could do something like this
// div to get the textContent from, replace it with whatever you want
const divE = document.getElementById('test');
// our list tag
const list = document.getElementById('list');
// looping
for (let i = 0; i < 4; i++) {
const listEl = document.createElement('li'); // our list element
const aTag = document.createElement('a'); // a new <a> tag to append link
const linkTag = document.createElement('link'); //new link tag
linkTag.href = '#test'; // setting hyperlink
aTag.textContent = divE.textContent // setting the textContent for <a> tag
aTag.appendChild(linkTag); // appending link to the a tag
listEl.appendChild(aTag); // appending a tag to the <li> tag
list.appendChild(listEl) // finally appending our list element to the main list
}
<div id="test">Something here</div>
<ul id="list"></ul>

onclick / anchor tag- javascript in HTML

Can someone help me on how to add anchor link/ onclick to a datarow
for(i=0;i<10;i++){
dataRow1 = dataRow.insertCell(0);
record = document.createTextNode(returnedValues[i].Name);
dataRow1.appendChild(record);
}
Your question is not clear, I assume this might be helpful:
// Create anchor tag
const a = document.createElement('a');
// Add link
a.href = 'http://yourlink.com';
// Add Text
a.innerText = 'Custom Link';
// `dataRow` should be a HTML Element
dataRow.appendChild(a);

Append data from div to link url

I am trying to have a div element on every page of my site that will contain the product number and then have a link that will put that number at the end.
For example,
<div id="productnumber">01101</div>
https://example.com/#
Then put the contents of the element with id "productnumber" after the # of the link.
Any idea if this is possible? Since this would make life easier than editing all existing pages and their respective php files.
Check for Element.innerHTML. You could use some inline JS and append it to the href-Attribute (which should be were id="purchaseurl" is now)
You can add a simple script to all your pages.
document.addEventListener("DOMContentLoaded", function() {
var productNumber = document.getElementById('productnumber').textContent;
Array.prototype.forEach.call(document.querySelectorAll('a[href~="purchaseurl"]'), function(link) {
// if you want to change the link
var currentHref = link.getAttribute('href');
link.setAttribute('href', currentHref + '#' + productNumber);
// if you want to change anchor text
var currentText = link.innerHTML;
link.innerHTML = currentText + productNumber;
});
});
<div id="productnumber">01101</div>
https://example.com/#
See getElementById, getElementsByTagName, and nextSibling.
var data = document.getElementById('productnumber'),
url = data.nextSibling.nextSibling;
url.innerText += data.innerText;
<div id="productnumber">01101</div>
https://example.com/#

find closing anchor tag from the string and add some value

I am trying to find closing anchor tag. And add Icon after the closing tag.The inside value is coming as a string from database.I need to extract the value and append with icon.
For example
<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>
In the above example I have paragraph tag inside I have two anchor tag.
Actually the result will come as Test added plus icon testdsfasffd & Test1 added plus icon 2 fdfdfdfdfd
First I need to find the closing anchor tag then i need to append the icon from other functions
Current I am trying like this
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
I am setting an pattern
var closingAnchor = '</a>';
string.split(closingAnchor);
after this i need to append icon from other function using for loop. I am getting struggle here kindly please help me.
Splitting HTML is normally a bad bad idea. So just do it with the DOM.
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
var div = document.createElement("div");
div.innerHTML = string;
var anchors = div.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var text = document.createTextNode(' TEXT TO ADD ');
var sibling = anchors[i].nextSibling;
if(sibling) {
anchors[i].parentNode.insertBefore(text, sibling);
} else {
anchors[i].parentNode.appendChild(text);
}
}
console.log(div.innerHTML);
document.getElementById("out").innerHTML = div.innerHTML;
<div id="out"></div>
Here you are: // for regex, <\/a> for </a>, g for search all
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
var output = string.replace(/<\/a>/g, '</a>YOUR APPENDEE');
alert(output);
Hope this helps.

Add css class to a javascript event

how can I add a class to the following element?
window.location = 'page.html';
for example, i'd like to get this result:
link
but my javascript page loads automatically after a function, not with a link text to click on.
Create a link element:
var a = document.createElement('a');
// <a></a>
Add an href:
a.href = 'page.html';
//
Add a class:
a.className = 'nameclass';
//
Add some text:
a.innerHTML = 'link';
// link
Append it to the body element:
document.body.appendChild(a);
// In your page!

Categories