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.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I have the following piece of code in my javascript file(helper.js):
var a = $('li')
$(window).keydown(function(e) {
\\whatever
})
it is supposed to select all tags in my html file and store in in a, however when I use this code, it a is null(which it shouldn't be). when I change my code to:
$(window).keydown(function(e) {
var a = $('li')
\\whatever
})
a is initialized correctly. Does anyone knows why? I am using jquery 3.3.1.
If you are dealing with the DOM (Document Object Model), use $(document).
If you are dealing with how user interact with the window, screen and so on, use $(window)
Here is a link for better understanding window and document
Window vs Dom
This question already has answers here:
Javascript getElementById based on a partial string
(9 answers)
Closed 3 years ago.
I just want to know to how to use custom varible with javascript.suppose we have 5 id with name zawsz,baws2,tawsx,paws4,vawsa and we want to execute single DOM command to all these element whose id is define here.
document.getElementById("-aws-").onclick=function(){}
Here -aws- define all the id define above.(-) can be replace with any char/int value;
You could use the following code:
(The following code will select all elements of which the id includes aws.
I have tested this code and it works: https://jsfiddle.net/5042woqz/)
document.querySelectorAll('*[id*="aws"]').forEach(function(item) {
item.onclick=function() {
console.log('click!');
};
});
Items will now be an array containing all your aws- items.
If you have further questions, just let me know.
P.S.: You could achieve the same thing really easily with jquery.
You can use document.querySelectorAll for this:
document.querySelectorAll('[id^="aws"]')
That will select all elements where the id attribute starts with (^=) "aws".
This question already has an answer here:
How to duplicate a div in JavaScript
(1 answer)
Closed 5 years ago.
What is a good equivalent for the jQuery .clone() function in regular DOM JavaScript? I performed multiple searches (on both SO and Bing) and didn't find a specific answer. I need to produce a copy of an element and all of its internal elements. The clone must have all of the elements and content of the source elements. If possible, make the solution as compact or efficient as possible.
try this
var clonedElement = document.getElementById('id').cloneNode(true)
var element= document.getElementById("myid");
var clone= element.cloneNode(true);
This question already has answers here:
jQuery Data vs Attr?
(3 answers)
Closed 5 years ago.
In code I do this:
var markerName = $(fileInput).closest('tr.file-input-row').find('input[type="text"]')[0].value.replace(/[^a-z0-9]/gi, '-');
$.data(fileInput, 'for', markerName);
in this case, markerName is "file-1"
If I check using:
$('input[type="file"][data-for="file-1"]')
I get an object with length equal to 0... so not found.
However, if I do:
$('input[type="file"]:first').data().for
in this case, the first input[type="file"] is the same input I set the data attribute for, I get:
"file-1"
...as expected.
It looks like it is being set, but it is then not accessible.
Any thoughts why?
TIA
This is not working because you aren't updating the DOM object when you perform the data-for adjustment in the first part of your code. To update the DOM object you should use attr(key, value).
For more info on the differences between data and attr there is a good answer related to this: jQuery Data vs Attr?
If I check using:
$('input[type="file"][data-for="file-1"]')
Neither .data() nor jQuery.data() is part of the object returned by jQuery() : $() call.
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";