I'm trying to add a button with a link after a div that has no id, using Google Tag Manager. I'm taking the specific div (without id) using the code below, but when I try to put the button after that div using innerHTML, the div is replaced by the button, and if I use appendChild (commented in my code) nothing happens.
<script>
var HTML = '<a href="#" target="_blank" class="button" >Send</a>'
var title = document.getElementsByClassName("class_title");
title[0].nextSibling.nextSibling.setAttribute("id", "newdiv");
document.getElementById("newdiv").innerHTML = HTML;
//getElementById("newscript").appendChild(HTML);
</script>
What am I doing wrong? Thanks a lot!
Generally, to insert a node after another, you use this (taken from this answer):
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
To use insertBefore, you should create a link element using JavaScript, and then insert it, like so:
<script>
var a = document.createElement('a');
var linkText = document.createTextNode("Send");
a.appendChild(linkText);
a.target = "_blank";
a.href = "#";
a.class = "button";
var referenceNode = document.getElementsByClassName("class_title")[0].nextSibling.nextSibling;
referenceNode.parentNode.insertBefore(a, referenceNode.nextSibling);
</script>
It's easy.
Your question is already answered here
In your case, do this:
// Create a variable for the element you want. Make it easy to read.
var element = document.getElementById("new_div");
element.parentNode.insertBefore(HTML, element.nextSibling);
Read the linked question to see the explanation in details.
Related
So, Ive read through similar things but I still can't find an answer that applies more closely to what I'm doing. I am attempting to use JS to get the current page URL and append it to a social media sharing link like this:
<a href="http://reddit.com/submit?url=CURRENTPAGE.html; title="This is a post!" target="_blank">
Using Javascript, I've managed to assign the current URL to a variable:
<script>
var x = window.location.href;
document.getElementById("smsharing").innerHTML = x;
</script></p>
And I made sure it worked by doing a test display of it. So what exactly is the proper method/syntax for actually putting 'x' in place of CURRENTPAGE.html???
I know this is a STUPID question, but I'm really stumped. Specifics help, because part of the problem is that I have precious little knowledge of JS. Thoughts?
This should do it:
<script>
baseurl="http://www.facebook.com?"
function buildURL(item)
{
item.href=baseurl+window.location.href;
return true;
}
</script>
</head>
<body>
<a onclick="return buildURL(this)" href="">Google</a>
</body>
Get the elements current href which doesn't have the url value and append the current url.
Modified HTML
<a id='smsharing'
href="http://reddit.com/submit?url="
title="This is a post!"
target="_blank">link</a>
Script
<script>
var x = window.location.href;
var link = document.getElementById("smsharing"); // store the element
var curHref = link.getAttribute('href'); // get its current href value
link.setAttribute('href', curHref + x);
</script>
Using just pure JavaScript you can set the href of the link by just having the base href as a string and then add the variable where ever it is needed.
var x = window.location.href;
document.getElementById("linkid").href = "http://reddit.com/submit?url="+encodeURIComponent(x);
Using jQuery it is as simple as:
$('a').attr("href",x);
You should simply replace innerHTML by href :
document.getElementById("smsharing").href = x;
Hope this helps.
Once you have access to the current URL, you then want to find the element and replace CURRENTPAGE.html. To do so, you'll need some way to select the element. Let's give it an ID:
<a id="myLink" href="http://reddit.com/submit?url=CURRENTPAGE.html"></a>
Now we can grab the link like so:
var link = document.getElement('myLink');
Let's get the URL again, and give it a better variable name:
var url = window.location.href;
Now let's update the HREF attribute of link:
link.href = link.href.replace('CURRENTPAGE.html', url);
And that's it!
Create another variable for the complete href attribute of your link:
var myURL = "http://reddit.com/submit?url=" + x;
Then replace the current href attribute with that variable:
docment.getElementById("YourLinkTagID").href = myURL
I am using the following code to insert a link to the currently selected text:
document.execCommand('CreateLink', false, 'link.com')
This works great, but I would really love to be able to insert a class/id with this link so as to make the styling of it easier with CSS. How can this be accomplished?
You can add a class by assigning to the className property of a DOM element:
someElement.className = 'myClass';
Note that document.execCommand is an IE invention, it is not cross–browser. Instead use:
var link = document.createElement('a');
link.href = 'link.com';
link.className = 'someClass';
link.id = 'someID';
link.appendChild(document.createTextNode('link.com'));
I'm replacing one image with another in javascript, then adding a link to it, but it doesn't seem to be working. Any suggestions?? Please and thank you!!
function showImage2(){
document.getElementById("tbc").src = "images/s2.jpg";
var elem = document.getElementById("Slideshow");
elem.style.display = "none";
document.getElementById('tbc').style.display='block';
document.getElementById('tbc').style.usemap='ss2Map';
var link = document.createElement('a'); // create the link
link.setAttribute('href', 'wastewater.html'); // set link path
link.appendChild("images/s2.jpg"); // append to link
}
link.appendChild("images/s2.jpg"); // append to link
This line won't do anything. You can only append an element, not a text string. You need to append document.getElementById("tbc") instead if I understand your markup correctly.
If that's not what you're trying to append, you can use var el = document.createElement('img') to create an img tag and then set the src attribute using el.setAttribute('src','images/s2.jpg')
After this, the above line would become link.appendChild(el); which would work.
I think all you really need is to have one image with a link and one image without the link. Onload, the image without the link is shown and the other image with the link is hidden. Once click on a button or something, then hide the image without the link and show the image with the link correct?
<img id="image1" src="http://us.123rf.com/400wm/400/400/tonygers/tonygers1108/tonygers110800022/10200687-manipulated-nasa-photographs-of-the-earth-and-moon-isolated-together-on-a-black-background.jpg" />
<a style="display:none;" id="image2" href="http://www.google.com" target="_blank"><img src="http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2011/08/us-astronaut-bruce-mccandless-space-walk.jpg" /></a>
Click Me
<script>
function showImage2(){
var imageOne = document.getElementById('image1');
var imageTwo = document.getElementById('image2');
imageTwo.style.display = 'block';
imageOne.style.display = 'none';
}
</script>
You can see the working code here. http://jsfiddle.net/QbbJU/1/
appendChild() can only take a DOM node, not a string.
To set the text of an element, you can either set innerHTML or textContent, or append a text node (from document.createTextNode())
You also probably want to put the link somewhere in your page.
I am trying to change the href of a link tag so that when a button is pressed a new style sheet is loaded.
function addcss()
{
var findlink = document.getElementsByTagName("link");
findlink.href = "stylesheetxhtml.css";
}
You can't set the href directly like that, because document.getElementsByTagName returns all the <link> tags (as a NodeList). If you're positive you only have one, use this:
var findlink = document.getElementsByTagName("link");
findlink[0].href = "stylesheetxhtml.css";
If you have multiple <link> elements and want to target a specific one, give it an id and use document.getElementById:
var findlink = document.getElementsById("myLinkId");
findlink.href = "stylesheetxhtml.css";
Finally, if you want to create a new <link> element, use document.createElement:
var newLink = document.createElement('link');
newLink.href = "stylesheetxhtml.css";
document.getElementsByTagName("head")[0].appendChild(newlink);
Man, the most simple way is:
Just type this:
document.querySelector(".search").setAttribute("href","https://www.google.com/");
Now
Make your button do this on click!
I want to use a hyperlink string in HTML page which I want to declare source link (URL) in my js file. Please tell me how can I call that URL from my js into html.
Thanks
There are a number of different ways to do this. You could use document.createElement() to create a link element, and then inject the element into the DOM. Or you could use the .innerHTML property of an element that you already have on the page to insert the link using text. Or you could modify the "href" attribute of an existing link on the page. All of these are possibilities. Here is one example:
Creating/Inserting DOM Nodes with DOM Methods
var link = document.createElement('a');
link.textContent = 'Link Title';
link.href = 'http://your.domain.tld/some/path';
document.getElementById('where_to_insert').appendChild(link);
Assuming you have something like this in your HTML:
<span id="where_to_insert"></span>
Creating/Inserting DOM Content with innerHTML
And another example using innerHTML (which you should generally avoid using for security reasons, but which is valid to use in cases where you completely control the HTML being injected):
var where = document.getElementById('where_to_insert');
where.innerHTML = 'Link Title';
Updating the Attributes of a Named DOM Node
Lastly, there is the method that merely updates the href attribute of an existing link:
document.getElementById('link_to_update').href = 'http://your.domain.tld/path';
... this assumes you have something like the following in your HTML:
<a id="link_to_update" href="javascript:void(0)">Link Title</a>
Try this:
var alink = document.createElement("a");
alink.href = "http://www.google.com";
alink.text = "Test Link";
document.getElementsByTagName("body")[0].appendChild(alink)
From whatever I understand, You want to update href with JS variable.
You can use Jquery to achieve it.
try $("a").attr("href", js_variable)
Refer this for more details
How to change the href for a hyperlink using jQuery
It seems like you would be able to do something like this:
Using Javascript.
var col2= document.getElementById('id_Of_Control');
col2.innerHTML="<a href='page2.html?" + params + "'>Page 2</a>";
where col2 is another container control something like div,span, or any.
Using jQuery.
Here I will recommend you to Use jQuery. So you can be more dynamic.
$("#col2").append("Page 2");
OR
$("#col2").after("Page 2");
OR
$("#col2").before("Page 2");