My html is like this, I can only identify the div's class, there are no span' ids. I need to replace one href text and one image with some other text within those spans.
<div class ="myclass">
<span style="vertical-align:middle;">
</span>
<span style="vertical-align:middle;">
</span>
<span style="vertical-align:middle">
<span class="myspan">
<a href="http://testlink3">
<img title="test" class="imglink"></a>
</span>
</span>
<span>
Text - *This text needs to be replaced*
</span>
</div>
in the above code, I need to replace the img within the third span with a clickable text (which should take us to url) and the text within fourth span to a new text (keeping the url the same).
How can I get identify these specific spans when they are missing ids/classes?
We have 3 different things to do here:
How to replace the content inside a given element
This can be done very quickly:
$("selector").html("New text, same href");
Replace a given element with another
This can be done this way:
$("selector").replaceWith("<a href='somewhere.html'>I replaced an Img</a>");
Selecting the DOM elements
When you don't have an ID, nor a CSS class for your element, but you do know its position within another element plus some info about the element (like tagName), you can select the parent element and specify a relative position.
var myElement = $("parentElement").find("tagName:eq(position)");
Remember that this kind of selector ( "tagName:eq(position)") is zero indexed, so if you want to grab the third element, you need to tell jQuery tagName:eq(2).
So, let's say you parent element (not given in the question) is a div with a parent CSS class.
First thing you want to do is select this div.
var parent = $(".parent");
Then you want to find the Img within the third span.
var myImg = parent.find("span:eq(2)").find("img");
Now you can replace this element with the whatever you want
myImg.replaceWith("<a href='somewhere.html'>I replaced an Img</a>");
Note that jQuery allows you to pass HTML elements as a plain string.
Finally, you need to change the text inside the fourth span. This can be accomplished this way:
parent.find("span:eq(3)").find("a").html("New text, same href");
You could use document.querySelector to select an a based on the href:
document.querySelector("a[href='http://link4']").innerHTML = "The text you want to put in"
Since you're open to jQuery, this works too:
$("a[href='http://link4']").text("The text you want to put in")
var s = document.getElementsByTagName('span');
var i = spans[2].firstChild.children[1]; // here you find your img
i.parentNode.appendChild(<<your new text element>>);
i.parentNode.removeChild(img);// remove the image
var a = spans[3].firstChild; // here is your href
a.innerHTML = 'your new text';
You could use :nth-child() selector to select from the div you can identify.
More on :nth-child(): http://api.jquery.com/nth-child-selector/
Then select the img tag from the child span you found.
Related
My website HTML has the following:
To grab the H3 text (SOME TEXT) as a variable in Tag Manager - when a user clicks on the div class "c-card c-card--primary c-parkcard " I think I need to use a DOM Element variable
But it's not returning the text.
Should the Element Selector be:
.c-card.c-card--primary.c-card__body.u-h6.c-card__title
However, it returns a null value in Tag Manager
The solution was to create a custom JS variable that when the image was clicked on would find the "c-card c-card--primary c-parkcard " div (9 parents up) and then go back down to find the h3 element by class and then return the text:
function(){
var z = {{Click Element}}.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.getElementsByClassName('u-h6 c-card__title')[0].innerText;
return z;
}
use of getElementsByClass is as simple as:
$dom = new DOMDocument('1.0', 'utf-8');
$dom->loadHTML($html);
$content_node=$dom->getElementByClass("c-card__body");
$div_a_class_nodes=getElementsByClass($content_node, 'h3', 'u-h6 c-card__title');
You have set "h3" as "attribute name. "h3" is not an attribute (but the name of the tag). You do not want to set an attribute name at all, because you do not want to return the value of an attribute, but the innerText of the tag, and that is the default behaviour anyway.
If you use a DOM variable this will return the first instance on the page. If your selector matches several DOM nodes, you will still just get the first one, regardless if what the user clicks. If you expect this to update depending on the clicked element, you should rather use the {{Click Text}} variable (a built-in variable that you might have to enable first).
Chances are that the actual click element is not the h3, but the nested link inside, but that does not really change things for you (as in both cases the innerText will be the contained texted nodes, which in this case is the same).
I have following HTML and I need to read the SPAN Tag value of the next SPAN tag following a specific Tag containing a text:-
<div data-component-id="ghkzq6qysz8y"
class="component-inner-container status-green "
data-component-status="operational"
data-js-hook="">
<span class="name">
Address Validation
</span>
<span
class="component-status "
title=""
>
Operational
</span>
I need to read the SPAN TAG value of Component-Status of a specific SPAN Tag containing value "Address Validation". I can't use jQuery and this has to be done in JavaScript. In jQuery I could have used:
var apistatus =($('span:contains("Address Validation")').next('span').text());
Can someone help me with plain JavaScript how this can be achieved.
let spanValue = document.querySelector("span.name + span").innerText;
We use "+" to select the next immediate sibling of a specific element, in this case a span which is the next sibling of a span with the class "name".
var apistatus = document.getElementsByClassName("component-status")[0].innerText;
This is the markup:
<h2>
text One for link One
</h2>
<p> More text related to link one</p>
<h2>
text Two for link Two
</h2>
<p> More text related to link two</p>
<h2>
text Three for link Three
</h2>
<p> More text related to link three</p>
This is the jQuery:
var prevLink = $(this).closest('h2').prev('h2').find('a').attr('href');
var nextLink = $(this).closest('h2').next('h2').find('a').attr('href');
.this is the initial link. My understanding is that, .closest will take me to parent h2 tag and from there I an get to next and preveious h2 tags. .find should get me to link and finally .attr(href) will get me the attribute.
Now, previous and next element may not exist. Why am I unable to get the correct links? All I get is undefined. As an example, If I am on link2.html, I want prevLink to be link1.html and nextLink to be link3.html.
Thanks.
The .next()/.prev() methods only select the immediately following or preceding elements, which means that it won't select anything if the h2 elements have a sibling p element in between.
You could use the .nextAll()/.prevAll() methods instead. Then chain the .first() method in order to get the first element in the collection:
var prevLink = $(this).closest('h2').prevAll('h2').first().find('a').attr('href');
var nextLink = $(this).closest('h2').nextAll('h2').first().find('a').attr('href');
I am trying to grab a javascript element in my development site and change it's style. I am having no luck - this is the link to the site http://www.best-foods-for-fat-burning.com/wordpress/cat/עוף.
<span class="price"> there's an element with a NodeName = "#text" which I want to change its style. How can I attempt to change it ? I tried the following to "grab" the element but with no success:
var x=document.getElementsByName("#text");
alert(x.length);
var y=document.getElementById("#text");
alert(y.length);
var z=document.getElementsByTagName("#text");
Any suggestions of how I should grab the element and change its style?
It isn't immediately obvious from your question, but eventually I twigged that NodeName="#text" means that you are dealing with a text node. This is not an element.
You cannot style text nodes directly. You can only style element nodes and have their styles affect the text inside them.
You mention <span class="price">, so presumably the text node is a child node of the span.
You can style (the first matching) span with that class using:
document.querySelector('span.price').style.someProperty = "someValue";
Or you could use querySelectorAll and loop over the resulting node list to style all the elements that match.
Since you mention styling the text node specifically if your question, then you might have a situation like:
<span> foo <i> bar </i> baz </span>
… where you want to style "foo" and "baz" differently to "bar". To achieve that, you would usually style the span, and then override the styling for span i.
Alternatively, you might want to style foo without touching bar or baz. In this case, you need additional elements.
<span> <span>foo</span> <i> bar </i> baz </span>
Now you can style span span.
You should do like this:
var x = document.getElementById('text');//no need to use hash for the id
Or if you prefer to use jquery, then use like this:
var x = $('#text');//need to use hash for the id
Now, you can use x.length
Sorry, this may be kind of weird problem:
I have an existing HTML code, which I can not directly edit or delete parts of it. The problem is: Inside a div-element in this code, there is some text which I want to hide. There are also another element inside of this div, which I don't want to hide. It looks something like this:
<div>
....Text I want to hide....
<table> ... Text I don't want to hide...</table>
</div>
My question: Is it possible to hide the "....Text I want to hide...." while not hiding the "... Text I don't want to hide..."? (for example using javascript?)
var txt = div.childNodes[0];
var range = document.createRange();
range.selectNode(txt);
var span = document.createElement("span")
range.surroundContents(span);
span.style.display = "none";
See it here: http://jsfiddle.net/KZVDf/
If you want to remove the text, you can write:
div.removeChild(div.firstChild);
(where div is a variable referring to this <div> element).
If you want to wrap it in a <span> that you can then hide and unhide at will, you can write:
var span = document.createElement('span');
div.insertBefore(span, div.firstChild);
span.appendChild(div.firstChild);
(where div is as before).
Surround text which you want to hide with span and set to that span display:none. Example:
<div>
<span style="display:none">....Text I want to hide....</span>
<table> ... Text I don't want to hide...</table>
</div>
Or make it with hidden with script:
$('div span').show(); // Show hidden text in span
$('div span').hide(); // Hide text in span