This question already has answers here:
ID Ends With in pure Javascript
(6 answers)
Closed 3 years ago.
I need to get the ID of an element but the value is dynamic with only the end of it is the same always.
Heres a snippet of the code.
<TABLE ID="_MIPS-LRSYSCPU">
The ID always ends with '-LRSYSCPU' then the _MIPS is dynamic.
How can I get the ID using just JavaScript and not jQuery? thanks
Use the selector [id$="<END OF ID HERE>"]:
const table = document.querySelector('[id$="-LRSYSCPU"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
Similarly, by using ^ instead of $, you can select elements who attributes start with a certain string:
const table = document.querySelector('[id^="_MIPS"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
And *= to select elements who attributes contain a certain string:
const table = document.querySelector('[id*="LRS"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
Related
This question already has answers here:
How to correctly iterate through getElementsByClassName
(10 answers)
Closed last month.
HTML (I'm writing in a combination of Markdown & HTML).
- Ex. **<a class="kanji">犬</a>が**好き ・ I like dogs.
- Ex. **<a class="kanji">私</a>は**オーケーです・**I am** okay
JavaScript
const kanjiAnchor = document.getElementsByClassName("kanji")
for (var i = 0; i < kanjiAnchor.length; i++) {
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor.textContent}`
kanjiAnchor[i].target = "_blank"
}
The above code returns an href of "https://jisho.org/search/undefined". I was able to do this on a smaller scale only selecting a single anchor with `document.getElementById("kanji"), but I want this to be done to every anchor tag with the class "kanji".
You need to access the textContent of the current element rather than the collection of elements.
kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor[i].textContent}`
This question already has answers here:
Iterating over result of getElementsByClassName using Array.forEach
(14 answers)
Closed 7 months ago.
I have below div tag from material UI which is getting autogenerated through MUI -
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
Through javascript , I am fetching this element as -
var ele=document.getElementsByClassName("MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault");
console.log(ele);
In console log I am able to see element with all its properties including innerHTML as Some Text
When I am trying to change the InnerHTML by -
ele[0].innerHTML="Changed Text" , I am not able to see that text got changed.
Also , before this , when I try to log innerHTML -
console.log(ele[0].innerHTML) , I am getting blank result.
How can I change the inner HTML from HTML Collection I am fetching ?
You have missed two things:
Typo in getElementsByClassName -> should be getElementByClassName
If you put spaces in your class name inside getElementsByClassName like MuiAvatar-root MuiAvatar-circular, its not correct.
var ele = document.getElementsByClassName("MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault");
ele[0].innerHTML = "TEST"
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
This question already has answers here:
`find()` undefined is not a function
(4 answers)
Closed 6 years ago.
I get an error on the line targetTD[6].find('textarea').text() saying targetTD[6].find is not a function. (In 'targetTD[6].find('textarea')', 'targetTD[6].find' is undefined)
$(document).ready(function () {
$(document.body).on('click','.edit',function () {// use button class ince ID has to be unique per button
var targetTD;
if( $(this).find('i').hasClass('glyphicon-edit'))
{
targetTD = $(this).parents('tr').find('td'); // gives all TDs of current row
if (targetTD[6].firstChild.children.length) // the value cell is what we want
{
// targetTD[6].firstChild.children.item().setAttribute('readonly','false');
alert(targetTD[6].find('textarea').text());
}
I am trying to find a text area within a <td><div> <textarea readonly> some text </textarea><div><td>. How can I remove the readonly property ? Why cant I use find ?
Try to replace:
targetTD[6].find('textarea').text();
With:
$(targetTD[6]).find('textarea').text();
Because targetTD is an array with not wrapped elements. Also, to remove readonly property use:
$(targetTD[6]).attr("readonly", false);
targetTD[6] is a native JavaScript node. You need to wrap it in a jQuery selector $()
Like so: $(targetTD[6]).find
This question already has answers here:
How to select all elements with an attribute that starts with
(2 answers)
Closed 8 years ago.
I want to be able to check to see if a specific data attribute exists that starts with a specific value.
for example lets say i have the following HTML code:
<div data-attr="123ABC"></div>
<div data-attr="123456"><div>
<div data-attr="TEST"></div>
and then i want to find any use of the data tag of data-attr that starts with 123
if ($('[data-attr="123"]').length > 0) {
//do something
}
This appears to always return 0 as i have no data-attr="123" How would i make it so i can check for only that specific data attribute that starts with 123 and has anything after that?
here is how
if ($('[data-attr^="123"]').length > 0) {
//do something
}
This question already has answers here:
jQuery appended table adds closing tag at the end of the text automatically. Why?
(4 answers)
Closed 8 years ago.
I am adding a table to a page in javascript using.
$("#tablediv").append("<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>");
The problem is that what it is run </tbody> and </table> is getting added at the end.
How can I stop this from happening?
Thanks.
Are you trying to add new elements to the table after you create it?
ID your table and then append to that.
$("#tablediv")
.append("<table id='mytable' border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr></table>");
$("#mytable")
.append("<tr><td>Bla</td><td>Foo</td><td>Bar</td></tr>");
Call the second jQuery function each time you want to add a new row to your table.
I'm under the impression you want this so you can loop through outputting your results?
var table = "<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>";
// loop through your data here
table += "</tbody></table>";
document.getElementById("tablediv").innerHTML += table;
create var, append your stuff to it and then when you're ready call .append(html)
var html = "";
html += "<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>"
$("#tablediv").append(html);
You can't. You are operating on a DOM, not a stream of HTML.
jQuery allows you to use HTML syntax to describe a DOM fragment to be created (which you can then insert or otherwise manipulate), but that is just for convenience. If the HTML isn't a valid fragment, it will be error corrected.
If you want to deal in pieces of HTML, you have to do so as strings, not jQuery objects