This question already has answers here:
How to get the text node of an element?
(11 answers)
Closed 4 years ago.
The text I need is: "BLABLA" from this code:
<td id="1" title="something">
<span>text</span>
<img src="pic.png"></img>
<span><font>something</font></span>
BLABLA
</td>
I can select the <td> element with id, but if I try to get the innerHTML value, I get the whole code inside the <td> element.
You can use the lastChild property to get the last element of a container.
let MyElement = document.getElementById("1").lastChild.data.trim();
console.log(MyElement);
<table>
<tr>
<td id="1" title="something">
<span>text</span>
<img src="pic.png"></img>
<span><font>something</font></span>
BLABLA
</td>
</tr>
</table>
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
getElementsByName() not working? [duplicate]
(2 answers)
Closed 2 years ago.
I'm trying to click a button on a webpage.
<table class="table div-table list-pc bg-white" style='font-family: "gulim", sans-serif;'>
<tr>
<td colspan=2 align=left><input type="checkbox" name="check_all" id="check_all">SelectAll</td>
<td colspan=2 align=right><input type="button" name="btn_delete" value="DeleteAll" onclick="javascript:GoCheck()"></td>
</tr>
I tried to do it as below but it didn't work.
document.getElementsByName("btn_delete").click();
Help me, please.
getElementsByName returns element collection, you need to take first element of this collection. Than it'll work.
document.getElementsByName("btn_delete")[0].click();
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 months ago.
Learning Javascript at the moment, so please bear with me. I created a table in my connected.html and I am trying to obtain the element between the <td> tags in my event-page.js. I used document.getElementByID("tokens"), however I get null, I want to get 12. I think I have to do more with document.getElementByID("tokens") I used .innerText and .innerHTML but those didn't work. Any help would be appreciated! Sorry for such a simple problem.
*Note: The function in event-page.js is called when a button is clicked by the user.
connected.html
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="4" class="info">Tokens</td>
</tr>
<tr>
<td id="tokens">12</td>
</tr>
</table>
</body>
</html>
event-page.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
if (request.action.split(':')[0] === 'got-it'){
yt_name = (request.action.split(':')[1])
console.log(yt_name)
let table = document.getElementById("tokens")
console.log(table)
}
})
This Works, that means your EventListener are called before the DOM is loaded.
let table = document.getElementById("tokens")
console.log(table)
<table>
<tr>
<td colspan="4" class="info">Tokens</td>
</tr>
<tr>
<td id="tokens">12</td>
</tr>
</table>
This question already has answers here:
Handling colon in element ID with jQuery
(9 answers)
Closed 4 years ago.
I am very confused by how the jQuery id-selector works with my html.
Using the $('#id') selector, the jQuery Object doesn't contain the DOM Element I want, using the $('tag[id="id"]') selector somehow works though.
Can somebody explain why the former doesn't work but the latter does?
console.log($('#1_9:15')[0]);
console.log($('div[id="1_9:15"]')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Monday</th>
<td>
<div id="1_9:15">FREE</div>
</td>
</tr>
</tbody>
</table>
: has a special meaning in jQuery selectors. For example, to select all the animated elements, you can do a $(":animated"). That's why you need to escape it:
console.log($('#1_9\\:15')[0]);
console.log($('div[id="1_9:15"]')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Monday</th>
<td>
<div id="1_9:15">FREE</div>
</td>
</tr>
</tbody>
</table>
You're using an id that contains a colon :, which is how pseudo-classes and jQuery extensions are identified. In order for the selector engine to treat it as an id, you must escape it using \\.
When using [id="1_9:15"] you don't have the same problem because the id is enclosed in brackets and it's easy to identify.
Example:
/* Select the div by id escaping the colon. */
console.log($('#1_9\\:15')[0]);
/* Select the div using by id 'the attribute way'. */
console.log($('div[id="1_9:15"]')[0]);
/* Select the div using a pseudo-class. */
console.log($('div:first-child')[0]);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Monday</th>
<td>
<div id="1_9:15">FREE</div>
</td>
</tr>
</tbody>
</table>
This question already has answers here:
Getting the ID of the element that fired an event
(24 answers)
Closed 5 years ago.
Say I have an many html elements, a row in a table composed of table data (<td>) tags.
<td id="data1">foo</td>
<td id="data2">bar</td>
<td id="data3">baz</td>
How would I return the id of the td that was clicked. I know that I should make them links so that I can click on them properly, but just for this case I don't want to put links.
$("td").click(function () {
id = //The ID finder goes here
clickFunction(id)
}
I was thinking this is how it would be formatted. JQuery would attach an onclick event listener to any table data tags and when it fired, a function would run with the id of the table data element that was clicked.
Use this code: $(this).attr('id').
Simply, this.id:
$("td").click(function() {
console.log(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="data1">foo</td>
<td id="data2">bar</td>
<td id="data3">baz</td>
</tr>
</table>
This question already has answers here:
jQuery : remove element except inside element
(4 answers)
Closed 8 years ago.
I need to remove a single tag from the DOM using jQuery or JavaScript. I only need to remove the enclosing tag, not the content inside the tag.
remove(), detach(), empty() methods cannot be applied as they remove the whole content as well.
for example:
<table border="1" style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
need to remove only the <table></table>.
Currently DOM looks like this
<table style="width:600px">
<tbody><p> Number - Name - <br></p>
<p> 111 - ABC - <br></p>
<p> 222 - KLM - <br></p>
<p> 333 - NOP - <br></p>
<p> 444 - HIJ - <br></p>
</tbody></table>
Thank you in advance.
Try to .unwrap() it, but the result would be an invalid html,
$('tr').unwrap();
var text=$("table").text();
$("table").parent().html(text);// now at the place of text come
$("table").replaceWith($("table").html());
With Jquery :
$('table').each(function(){
$(this).replaceWith($(this).html());
});