This question already has answers here:
Is it possible to do ".value +=" in JQuery?
(5 answers)
Closed 8 years ago.
Since I've moved to jQuery development has sped up for a great deal, but there is one thing which has become a little more time-consuming: appending some string to an attribute/value.
For example, if you wanted to append a letter to the value of a textbox, you would normally do:
input.value += 'a';
but now using jQuery, it has become:
input.val(input.val() + 'a');
I know it wouldn't be too hard to create a function which can do this and then append that function to jQuery.fn, but I was rather wondering whether there is such a function perhaps already available. I haven't found any so far. Or is there perhaps a better technique of appending a string to a value/attribute than what I'm doing at the moment?
If you know that your element has a value attribute, there is no reason not to use
input.value += 'a';
There is nothing to stop you using plain JavaScript in your jQuery scripts.
In fact,
input.val(input.val() + 'a');
has no benefits over using plain 'js', except if your input is a jQuery object and you want to chain methods.
I'd suggest overall
var $input = $('#someInput');
$input[0].value += 'a'; //get the DOM object from your jQuery object
Related
This question already has answers here:
Sanitizing user input before adding it to the DOM in Javascript
(7 answers)
Closed 5 years ago.
I am adding a option to a select that is input by a user:
function prependToSelect(userInput){
$('#x').prepend('<option>' + userInput + '</option>');
}
what is the safest and most simple way to make sure there is nothing dangerous in userInput that can break the javascript or html? It would also be good if the solution/function would be reusable in different scenarios.
My inital answer would be to create a options element and set the innerText instead of innerHTML
but since u use jQuery...
$('#x').prepend($('<option>', {text: userInput}))
Don't add it as HTML.
document.querySelector("#x")
.appendChild(document.createElement("option"))
.textContent = userInput;
This adds it as .textContent so no HTML will be parsed, so no danger.
This question already has answers here:
Performance of jQuery selectors vs local variables
(5 answers)
Closed 7 years ago.
I have a strange question about jquery selector behavior.
First approach:
$('#div').find('#something').html('hahah');
$('#div').find('#something').html('hahah');
$('#div').show();
Second approach:
var $div = $('#div');
$div.find('#something').html('hahah');
$div.find('#something').html('hahah');
$div.show();
I know that it might not have too much difference, but is the second faster than the first?? I've always used the second approach but I'm not sure if there is a difference because I don't know how the jquery selector algorithm works.
The second way is faster/better because you have cached the selector.
Everytime you call $('selector'), the jQuery selector engine(sizzle) is called to locate your desired elements.
However, when you store them in a variable, you do not need to repeatedly call the selector engine as the results are stored.
Note, in your example above, caching can be further improved by storing the find() result as well
var $something = $('#div').find('#something');
$something.html('hahah');
$something.html('hahah');
$something.show();
This question already has answers here:
How to use JavaScript variables in jQuery selectors?
(6 answers)
Closed 8 years ago.
Its a simple question, could not find an answer from google.
Code
$.click(function(){
var curID = $(this).parent()[0].id;
$("#"+curID input).attr("checked",true);
});
Onclick function is giving me the parent id, Now, using the parent id i want to find the input element and add checked attribute.
I am not sure of the syntax of querying by dynamic ID.
I want to know how can i query by dynamic variable.
Thanks in advance.
$("#"+curID).find('input').attr("checked", true);
Or
$(this).parent().find('input').attr("checked", true);
Or
$('input', $(this).parent()).find('input').attr("checked", true); // using the scope argument
The selectors are strings... So should be handled as strings by concatenating the variables: and texts
$.click(function(){
var curID = $(this).parent()[0].id;
$("#"+curID+" input").attr("checked",true);
});
Your search is probably too specific. Break tasks down into their components instead of looking for a complete solution to a very specific problem. You are just dealing with basic string concatenation here.
You want:
var selector = "#foo input";
You have foo in a variable.
var selector = "#" + foo_variable + " input";
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HtmlSpecialChars equivalent in Javascript?
I couldn't find a good string sanitization function to be safely used inside HTML. I was wondering if this is a good approach:
String.prototype.sanitize = function() {
return $('<div></div>').text(this).html();
}
For sanitizing against XSS, yes. For sanitizing against SQL injections, no.
It's better (and still easy) to remove the jquery requirement:
String.prototype.htmlspecialchars = function() {
var span = document.createElement('span'),
txt = document.createTextNode(this);
span.appendChild(txt);
return span.innerHTML;
}
The coupling with document still isn't so bad, because that's where it's going to be used anyway, but I prefer using successive String.replace() like in this answer.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why does jQuery .after() not chain the new element?
This reference code:
$("#id").after(string);
Does a pretty good job inserting the element of the string where its need to.
How can I get a reference to newly inserted HTML element (string)?
var string = '<div id="some_HTML"><span>hello kitty</span></div>';
$jq_elem = $(string); //if it's not a jQuery object, make it one
$("#id").after($jq_elem); //insert into DOM
$jq_elem.css('color', 'red'); //still available
FIDDLE
Try using insertAfter:
var $str = $(string).insertAfter('#id');
This will work if string is HTML.