1

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?

1
  • Are 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. Jan 23, 2011 at 18:29

2 Answers 2

4

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. alt text

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/");
    }
  }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .