Chrome extension to automatically replace html code - javascript

How could I change the value of id automatically,
e.g. if I have
<div id = "email">
I would like to change it to
<div id = "nick">?

AutoReplaceHTML seems to be what you are looking for. If you would like further customization, you can use content scripts with JavaScript that searches for elements by id.
I'm not sure why you would want to do this, however. The id of an element is used to determine which CSS styles apply to it and can possibly be used in scripts (like the JavaScript getElementById() example I linked). Changing the id of an element could break the styling or produce an error in any of the attached scripts.

Related

Changing an elements ID using Javascript

I'm trying to change the id 'character' to 'characterSelected'
var character = document.getElementById('character');
var characterSelected = document.getElementById('characterSelected');
function klik() {
character.innerHTML = characterSelected;
}
character.addEventListener('click', klik);
This is what I have so far but it doensn't seem to work. I want to do this using Javascript only, no jQuery.
Thanks
You tried something, it didn't work. Now is the time to look up the standard properties and functions you're using incorrectly. If guessing doesn't work, always look for reliable documentation.
A good reference would be the Mozilla Developer Network (MDN). It's a wiki-style encyclopedia about the web, its standards and current browser compatibility. If you look at the page about innerHTML, you'll find the following:
The Element.innerHTML property sets or gets the HTML syntax describing
the element's descendants.
This means that the innerHTML property is used to replace the content of a tag as if you wrote that HTML inside it. Not what you want.
What you wanted was to change the id of an element. If you search for element id, you'll land on the Element.id page. And how practical, there's an example:
var idStr = elt.id; // Get the id.
elt.id = idStr; // Set the id
However, this is not going to fix your issues. You see, you guessed wrong when trying to use the getElementById function. This function looks at the page and finds the element with that id right now. If you don't have any element with the characterSelected id at first, then this variable you set is going to be null for the rest of time. Variables won't magically update when an element with that id is placed in the page.
And finally, you have missed the purpose of the id attribute itself.
Its purpose is to identify the element when linking (using a fragment
identifier), scripting, or styling (with CSS).
The purpose of an id is to identify an element uniquely. You might think: "that's what I'm doing". No. You're using an id to represent whether or not an element is selected. This is wrong. Depending on your objective, I would say: just store the selected element inside a variable. Then whenever you need to do something with the selected element, it's in that variable. If you need specific style for that element, then you could set a class to it. But the id isn't meant for this at all - in fact, an id isn't meant to change once an element is placed.

Simple DOM attribute matching in Google Tag Manager

Using Google Tag Manager, I'm able to use pre-defined variables like Click Classes, Click ID to match the class and id attributes of DOM element But what about something like this below,
<div data-user_tag="interested-in-service"></div>
Which GTM feature am i supposed to use to match custom attributes like data-user_tag above?
I've tried using Custom Javascript but i'm unable to get the parameters right to access these attributes.
couldn't find a particular example to help me in GTM documentation
Any Ideas?
Go to variables, click "new", select "DOM Selector Element. Set to method "CSS selector", enter the selector (tricky part, see below) and set attribute name to "data-user_tag":
The problem is of course that the selector in this case does not (necessarily) address a unique element. If you have multiple divs this variable will return only the first div with the data-user_tag (actually since attribute name is set it will return the value of the data-user_tag, not the element itself).

Add id to dynamically created DIV

I would like to add an ID to the div with the class name="leaflet-control-layers-base". Because this HTML script is automatically generated through an API (Leaflet) when the page is loaded, I cannot add the id within the script.
The reason I am asking is because I have two of these scripts as shown below within my page. I would like to distinct them from each other so that I can refer to them individually. The only difference is that the other script is not located in the "TOCContent" div.
Any ideas how I can add an id using JavaScript or jQuery to the 'leaflet-control-layers-base' class?
Here is my script:
<div id="TOCContent">
<div class="leaflet-control-layers leaflet-control-layers-expanded" aria-haspopup="true">
<form class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
</form>
</div>
Try this:
$(".leaflet-control-layers-base").attr("id","your id will go here");
Select the element using the combinator selector, to ensure it selects a descendant of #TOCContent, then set the id property.
$('#TOCContent .leaflet-control-layers-base').prop('id', 'someid');
Remember to run this after your API code has rendered the elements on the page, not before. You will probably need to hook up to some sort of complete event on your API, because the basic DOM Ready event will likely fire before the API has rendered the elements.
Side note: it may not be necessary to give the element an ID, since by doing so you need to obtain a reference to the element anyway, which you can store in a variable.
var base = $('#TOCContent .leaflet-control-layers-base');

div not being selected when pound sign is appended

For debugging purposes, this is what I tried to type in Chrome Console:
$("#loading")
> null
But if I do this, it correctly retrieves the div:
$("loading")
> <div id="loading" align="center" style="display: none;">
I'm using jquery-1.4.1.min.js.
<script type="text/javascript" src="../../js/jquery-1.4.1.min.js"></script>
This doesn't make sense to me, why can I not select a div by # sign but I can when I exclude it?
Edit: Sorry, huge fail on my part. I meant the other way around. Please see the revised question.
The only other js library i have is prototype.js, which is loaded after jquery script.
$("#loading") indicates to get dom with specific id for that # sign is used.
without # jQuery will not recognize dom with id.
Similarly to get specific DOM with class name you has to use .
Some example selectors are :
Selector Example Selects
* $("*") All elements
#id $("#lastname") The element with id="lastname"
.class $(".intro") All elements with class="intro"
.class,.class $(".intro,.demo") All elements with the class "intro" or "demo"
I have checked at my side and see the result.
You should have a look at the jQuery selector documentation.
Some basic rules when using jQuery selectors follow (these are by no means exhaustive, you should look at the docs):
Using a # at the beginning of your selector will search for all DOM nodes with an id of whatever word follows the #. So $('#loading') will select DOM nodes with id="loading". This should only return one element, since non-unique ids on a page are invalid HTML.
Using a . at the beginning of your selector will do a similar search to #, but will look at all DOM nodes' class attributes instead and select those with a class matching your selector. So ('.loading') will select DOM nodes with loading in their class attribute's value.
Using simply a word with no preceding symbols will attempt to select all DOM nodes whose element tag name matches your selector's word. So $('loading') will attempt to find all <loading> tags, but since this isn't an actual HTML tag, nothing will be selected.
EDIT
So while the above is true, it seems that you had conflicts between prototype.js and jQuery. These are well known and much lamented. You can look at jQuery's wiki entry on using jQuery with other libraries and the documentation on jQuery.noConflict() for more information on this. Essentially, you will need to use jQuery instead of $ to access the jQuery library.
$("loading") indicates that you are selecting an html element tag like <div> tag ($('div')).
$("#loading") indicates that you are selecting an html element tag with id like <div id='loading'>.
Have a look at jquery selectors... http://api.jquery.com/category/selectors/

Jquery doesn't apply hide() to all of the divs with the same ID

I'm making a site, and the html is displayed through php with data fetched from a database.
I have a foreach() function, so all of the things displayed have the same DIV ID's.
It ends up being like 4 DIVs with the same ID (#content), so the PHP works fine, but I have a jQuery script and when I call the jQuery("#content").hide(); it only hides ONE of the DIV's not all of them, and I want it to hide all of them. Is there something else I have to do?
Thanks.
You should use a class (.class_name), not an id--only one DOM element may have a given ID, otherwise it's invalid HTML. It's reasonable for an ID selector to return only a single element.
IDs on elements on a page should be unique. So every HTML tag you specify should have a different ID. If you want to hide all of a certain element, it might be suitable to add a class to the elements you wish to hide?
e.g.
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
Then your jquery would be:
$(".divToHide").hide();
That's simply because you cannot have more than one element with a specified ID. IDs are and must be unique. Only one single element with the same element may exist in a DOM.
Failing to follow this rule may result in broken scripts and other horrors.
You can use classes for this purpose.
an ID can only be used ONCE in HTML! because its a id and a id should always be Unique

Categories