Can I add or change HTML when in 'Inspect Element'?
Solution 1
You do not say what browser you are in, but if this is chrome, the answer is yes.
After you have selected an element, right click and choose "edit HTML"
However, please note that this will not save the website or anything else, it just edits your local copy. If you refresh the page, it will go back to how it was.
Solution 2
As others have said, you can change the link using Inspect Element
, but the change will not be saved the next time the page loads.
If you want the link to be changed each time you open the page, you can use Greasemonkey
, or other similar add-ons depending on which browser you are using. (For Firefox, you could use Greasemonkey
).
Here is a Greasemonkey
script that should do what you want:
// ==UserScript==
// @name Test-SU-236831-edit-link
// @namespace Test-SU
// @description Test-SU-236831-edit-link
// @include http://superuser.com/questions/236831/*
// @include http://www.superuser.com/questions/236831/*
// @version 1
// @grant none
// ==/UserScript==
var GMnode,GMelID,GMmsg="";
GMelID="nav-questions";
GMnode=document.getElementById(GMelID);
if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
GMmsg="OLD getAttribute-href="+GMnode.getAttribute("href")+"\n";
GMnode.setAttribute("href","http://www.google.com/");
GMmsg=GMmsg+"NEW getAttribute-href="+GMnode.getAttribute("href");
alert(GMmsg);
}
else{
alert("Can't find <a> element with id='"+GMelID+"'");
}
The above script has some "debugging" statements in it so you can see what's happening when the page loads. Here is the same script without the "debugging" statements:
// ==UserScript==
// @name Test-SU-236831-edit-link
// @namespace Test-SU
// @description Test-SU-236831-edit-link
// @include http://superuser.com/questions/236831/*
// @include http://www.superuser.com/questions/236831/*
// @version 1
// @grant none
// ==/UserScript==
var GMnode,GMelID;
GMelID="nav-questions";
GMnode=document.getElementById(GMelID);
if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
GMnode.setAttribute("href","http://www.google.com/");
}
In case you're not familiar with Greasemonkey
, to use the above script, you would have to first install the Greasemonkey
add-on, then add the above script as a new User Script
.
You can change the @name
, @namespace
, and @description
fields to whatever strings you want in order to uniquely identify the User Script
.
Change the @include
field to to identify the URL that you want the User Script
to act upon. You can have more than one @include
field.
Greasemonkey
will run and act upon the webpage after the document is "Ready", meaning after the entire page including the <Body>
and all external scripts have been loaded, but before the page resources like images and some dynamically loaded scripts are loaded. There are steps you can take to insure that Greasemonkey
waits for all these other resources to load before running your code. You would do this by adding an eventlistener
to execute your code after the onload
event. In most cases, this won't be necessary, but in case it is for your target webpage, here is the Greasemonkey
script for that:
// ==UserScript==
// @name Test-SU-236831-edit-link
// @namespace Test-SU
// @description Test-SU-236831-edit-link
// @include http://superuser.com/questions/236831/*
// @include http://www.superuser.com/questions/236831/*
// @version 1
// @grant none
// ==/UserScript==
if (window.addEventListener) {
window.addEventListener('load', readytogo, false);
}
else {
if (window.attachEvent) {
window.attachEvent('onload', readytogo);
}
}
function readytogo() {
var GMnode,GMelID;
GMelID="nav-questions";
GMnode=document.getElementById(GMelID);
if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
GMnode.setAttribute("href","http://www.google.com/");
}
}
Related videos on Youtube
MarQe
Updated on September 17, 2022Comments
-
MarQe over 1 year
Can I add or change HTML when in 'Inspect Element'. I have a 'Home' link button that I want amend the link. I've used the right click option but my changes are not saved?
-
Dennis Williamson over 13 yearsAre you talking about the "Inspect Element" feature of Chrome? You can use that to try out changes, but there's no way to save the changes to the remote host.
-