I am trying to append child via jQuery to the on of selected HTML element.
My code:
var table = $(this).parent();
console.log(table)
table.appendChild(table_row);
Console:
[table.table.unit-list, prevObject: jQuery.fn.init[1], context: tr] //log
... appendChild is not a function //error
Just use .append()
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.
table.append(table_row);
Read about Difference between append and appendChild
You are trying to use pure JavaScript function appendChild with jQuery object.
To append your table use jQuery append table.append(table_row);
OR you can access to pure JavaScript object by getting very first element from jQuery table[0]. So it will be like table[0].appendChild(table_row);
Since jquery $ function returns "Array" (actually it returns iterate-able object)
you can use
table[0].appendChild(tableRow)
if you want to use appendChild .
Related
I am trying to select a DOM element that has these classes:
mq-editable-field mq-math-mode mq-field
I have tried using:
document.getElementsByClassName('mq-editable-field mq-math-mode mq-focused')
This is not working, is there another document function I should be using? I am using vanilla javascript.
Use a query selector:
document.querySelector('.mq-editable-field.mq-math-mode.mq-focused')
you can use querySelector and querySelectorAll for get multiple-element by classes
querySelector method : return the first element within the document which matches a specified CSS selector(s)
let firstElement= document.querySelector('.mq-editable-field.mq-math-mode.mq-focused');
querySelectorAll() method : method returns all the elements within the document which matches the specified CSS selector(s).
let elements = document.querySelectorAll('.mq-editable-field.mq-math-mode.mq-focused');
I am trying to find first row first anchor tag in jquery ?
I have 4 rows .I want to get first row anchor tag. I tried like this
https://jsbin.com/woxatuxoju/edit?html,js,output
$(()=>{
console.log( $('a[title=" Nominal"]')[0])
$('a[title=" Nominal"]')[0].css({'background-color':'red'})
})
but not able to find correct element.
$('a[title=" Nominal"]')[0] returns the DOM object of element and not the jquery object. Due to this .css () method is not applying the changes.
You should use .eq() selector to get jquery object of element by its index:
$('a[title=" Nominal"]:eq(0)').css({'background-color':'red'});
Using Javascript:
document.querySelectorAll('a')[0].style.backgroundColor = 'red';
Working Demo
I have the following link inside my web page:
Attachments and Documents
Now I want to select this link based on its text "Attachments and Documents", and set a target attribute for it.
So I tried the following:
var tgb = $('a:contains("Attachments and Documents")')[0];
tgb.attr('target', '_blank');
But I got the following exception :
TypeError: tgb.attr is not a function
As soon as you use index ([0]), tab is no more a jQuery object. To get the jQuery function attr() you have to wrap tgb with $:
var tgb = $('a:contains("Attachments and Documents")')[0];
$(tgb).attr('target', '_blank');
// to demonstrate result
console.log(tgb)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Attachments and Documents
attr() is a jQuery function. You need to target your variable using jQuery methods
$(tgb)
Hope this helps :)
var tgb = $('a:contains("Attachments and Documents")')[0];
$(tgb).attr('target', '_blank');
console.log(tgb);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Attachments and Documents
var tgb = $('a:contains("Attachments and Documents")');
tgb.attr('target', '_blank');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Attachments and Documents
The issue with your logic was the [0] that you were putting on the tgb. [0] on a jQuery object breaks the element out of the jQuery object and returns the native Element. There are various reasons why you would want to do this, such as if you wanted to access element properties and you don't want to go through the jQuery prop() or attr() method.
However in your case, you are trying to use the attr() method off of tgb. However, attr() is a jQuery method. Since you broke the element out of the jQuery object, this will not work.
Rather than turning the tgb back into a jQuery object, simply take off the [0]. This fixes your issue, and removes the need to create another jQuery object which, give the snippet you provided, is unnecessary work.
Optionally, if you do want it to be a native Element you could just set the attribute directly.
var tgb = $(...)[0];
tgb.setAttribute('href', newValue);
//or
tgb.href = newValue;
I have a set a dynamically created divs with the same class name. Now I want to append a entirely new div to all of the above mentioned divs.
Say the class name is extra-upper-block
At the end of my page I have this code
<script>
//function call to load dynamic content
</script>
<script>
$('.extra-upper-block').append('<div>New Div</div>');
</script>
This throws an error in chrome's console
Uncaught TypeError: undefined is not a function
But when this code is executed in chrome's console after the page is loaded, it works!
Why doesn't it work even when I load the dynamic content before executing the append command. Help?
Use jQuery class selector.
$(document).ready(function(){
$('.extra-upper-block').append('<div>New Div</div>');
});
Wrap your code in $(document).ready() for jQuery to get the elements available, and include jQuery file reference.
Note : .append() method is a part of jQuery.
Demo
document.getElementsByClassName returns an array-like object, you can't use it like jQuery, you need to access the individual element in a loop. Also, use appendChild on DOM elements, because they don't have an append method (like jQuery does).
Also, you are trying to append a string <div>New div</div>, you can't directly do that with a DOM element, so instead you can create the div element like so:
Demo
var elements = document.getElementsByClassName('extra-upper-block');
for(var i=0; i<elements.length; i++){
var newDiv = document.createElement('div');
newDiv.appendChild(document.createTextNode('New div'));
elements[i].appendChild(newDiv);
}
Note: querySelectorAll has better cross browser support than this. If you have jQuery included you can simply do:
$('extra-upper-block').append('<div>New Div</div>');
As you can see, with jQuery you can append a string directly.
try writing
document.getElementsByClassName('extra-upper-block')[0].appendChild(document.createElement('div'));
Append is a function in jQuery, try this:
<script>
$(function() {
$('.extra-upper-block').append('<div>New Div</div>');
});
</script>
I am trying to iterate through all the span elements that is the children of a div:
$('#recommendTextArea').children('span').each(function () {
console.log(this.html());
});
However I always get this error:
Uncaught TypeError: Object #<HTMLSpanElement> has no method 'html'
I tried changing it to text(), but it also doesn't work
Try with this :
console.log($(this).html());
You were trying to call .html() on DOM element, not a jQuery object.
$('#recommendTextArea').children('span').each(function () {
console.log($(this).text());
});
1) Try $(this).html() or $(this).text()
2) you could use alternatively $('#recommendTextArea').find("span") to get the spans
.html() is a jQuery function and must be called on a jQuery object. You can create a jQuery object from this by passing it to the jQuery object, like $(this)
In your code this is a <span> which does not have any native method called .html(), hence the JavaScript error.