I need some help with Javascript.
What I try to do is move an element to another element.
Normaly I can use the queryselector but in this case I can not because there are multiple elements with the class "destination". To get the result what I want I need select first the parent element "catalog-item" and after that the child "destination".
I need some help to get the right element catalog-item->destination
<div id="catalog-item">
<div class="destination">
</div>
</div>
<div id="move"></div>
<script type="text/javascript>
var itm = document.getElementById("move");
var cln = itm.cloneNode(true);
itm.remove();
document.getElementById("catalog-item").children(".destination").appendChild(cln);
</script>
Who can help me?
You can select the child element with querySelector by writing document.querySelector("#catalog-item .destination"). Just put a space between them.
Related
I am trying to write a script that will get the grab the only if the parent structure is div.main-element input+label+ul.
Is there any appropriate way to set that up using javascript or jquery?
If anyone could direct me to the appropriate answer or documentation that would be absolutely awesome.
My end goal would be to replace the ul>li with an hr tag using either an append or .replace()
here is my HTML:
<div class='main-element'>
<input>
<label></label>
<ul>
<li>Example</li>
</ul>
</div>
<div class='main-element'>
<input>
<label></label>
</div>
You could check if the element that you want exists using this kind of code in jquery :
if($("div.main-element ul li").length){
//your code
}
This will execute on your html example, next you can modify the value of the first element using :
$("div.main-element ul li").append("blahblahblah");
Note that this gives you access to the first li tag found inside of a div.main-element>ul of your html page.
You can provide a second argument to a jquery call that is the parent container within which you want to get elements from. There is also a find function that does the same thing.
HTML:
<div class='main-element'>
<input>
<label></label>
<ul>
<li>Example</li>
</ul>
</div>
<div class='secondary-element'>
<input>
<label></label>
</div>
JS:
var $secondaryElement = $('.secondary-element');
var $secondaryInput = $('input', $secondaryElement);
Another approach:
var $secondaryInput = $('.secondary-element').find('input');
Both of the examples above will return ONLY the input element inside of the secondary-element div.
Does that answer your question?
Links:
https://api.jquery.com/find/
and
https://api.jquery.com/jquery/#selector-context
This will get all elements with your composition and replace ul>li by hr.
var elements = document.querySelectorAll(".main-element input+label+ul li");
for(var i = 0; i < elements.length; i++){
var parent = elements[i].parentNode.parentNode;
var ul = elements[i].parentNode;
ul.parentNode.removeChild(ul);
var hr = document.createElement("hr");
parent.appendChild(hr);
}
I have a div tag with class divstudent, lets say this is div1 tag. Now I want to create another div tag div2 dynamically below this div1 tag, not inside of the div1 tag. I want to create outside of div1 tag using javascript. How can I do that?
"div1"
<div class="divstudent"></div>
<!-- i want to be like this -->
<!-- "div1" -->
<div></div>
<!-- "div2" -->
<div></div>
<!-- "div3" -->
<div></div>
$(function() {
$("div").eq(0).after("<div>This is div 2</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
This is div 1
</div>
Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Divs creator</title>
<script type="text/javascript">
window.onload = function () {
var divReference = document.querySelector('.divstudent');
var divCounter = 0;
divReference.addEventListener('click', function () {
var divToCreate = document.createElement('div');
divToCreate.innerHTML = ++divCounter;
divReference.parentNode.appendChild(divToCreate);
}, false);
}
</script>
</head>
<body>
<div class="divstudent">
<input type="button" value="add div below divstudent">
</div>
</body>
</html>
Since this is tagged jquery, just use .after()
$(function() {
$("div").eq(0).after("<div>This is div 2</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
This is div 1
</div>
There are many ways to do this. One significant difference in methods is if you choose to create the elements first using Document.createElement() and then insert the elements, or create and insert the elements in one step using one of the methods that allows you to insert HTML text.
Because it is simpler, but not necessarily better, the examples below show creating and inserting the two <div> elements in a single step using methods that allow inserting HTML text into the DOM.
JavaScript:
One is to use insertAdjacentHTML() and specify that it is to be inserted afterend of the element you are using.
document.querySelector() is used to find the first <div class="divstudent">. Then insertAdjacentHTML() is used to add the additional <div> elements. Element.removeAttribute() is then used to remove the class="divstudent". Note: if we had just wanted to set teh class to something different, even '', then we could have used Element.className.
NOTE: In this answer, text identifying each <div> has been added to the <div>s so there is something visible in the examples in this answer.
//Find the first <div class="divstudent"> in the document
var studentDiv = document.querySelector('div.divstudent');
//Insert two new <div> elements.
studentDiv.insertAdjacentHTML('afterend','<div>2</div><div>3</div>');
//Remove the class="divstudent"
studentDiv.removeAttribute('class');
<div class="divstudent">1</div>
jQuery:
While your question is tagged jQuery, a comment you posted implies you are just using JavaScript. Thus, I am not sure if jQuery works for you.
If you want to use jQuery, then you can use .after() to add the <div> elements. You can then use .removeAttr() to remove the class="divstudent".
// Get the first <div class="divstudent">.
// Store it in a variable so we only walk the DOM once.
var $studentDiv = $('div.divstudent').eq(0);
//Add the two new <div> elements
$studentDiv.after('<div>2</div><div>3</div>');
//Remove the class="divstudent"
$studentDiv.removeAttr('class');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divstudent">1</div>
You create a new div (in js), then just append your newDiv, after the target div. Something along the lines of in vanilla js:
// Create your new div
var newDiv = document.createElement("div");
newDiv.innerText = "New Div!";
// Grab the div you want to insert your new div after
var target_div = document.querySelector("div.divstudent");
// Insert newDiv after target_div (before the thing after it)
target_div.parentNode.insertBefore(newDiv, target_div.nextSibling);
I know it is a stupid question but i couldn't find a solution for this. Knocking my head for hours.
I have a HTML Structure,
<div class= 'container'>
<div class="someclass">
<input>some content</input>
<input>some content</input>
</div>
<input id="question-xxx" type="hidden"></input>
</div>
I need to get the count of all the Input elements inside the class = 'someclass' using the id = "question-xxx".
I tried using
$("#question-xxx").closest('.someclass').find('input').length;
or
$('#question-xxx').closest('.someclass').children().length;
I googled it out, and I have no clue what I'm doing wrong. Any help would be quite appreciable.
.someclass will not be found using closest try finding it by siblings.
closest is used to find the parent element of given element. Here someclass is not parent of question-xxx.
closest and parent are same. You can find more info here
$("#question-xxx").siblings('.someclass').find('input').length
var count = $('#question-xxx').prev('.someclass').find('input').length;
alert(count)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= 'container'>
<div class="someclass">
<input>some content</input>
<input>some content</input>
</div>
<input id="question-xxx" type="hidden"></input>
</div>
use .prev() to get the div that contains the input
Description: Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.
use .length to count
I'm new to javascript I'm having a very simple problem. I just don't get what's going on.
I just want to add a class to a <div> tag but it's not working
This is my javascript:
var element = document.getElementById("main");
element.classList.add("hidden");
Here's my fiddle:
http://jsfiddle.net/72o6j6r0/
You are close, the method document.getElementById() returns an HTML element by using the id of the element
HTML:
<html>
<body>
<div id="main">
This is my main content to be hidden
</div>
</body>
</html>
Javascript:
var element = document.getElementById("main");
element.classList.add("hidden");
If you want to use the class attribute to select your elements rather than the id you can use:
document.getElementsByClassName()
and then loop over the results
Here is a JSFiddle example:
http://jsfiddle.net/mko3uf9f/
Hi I need to move a child element to become a parent, so for example i have this code:
<div id="parent1"></div>
<div id="parent2">
<div id="child1">some text in here</div>
</div>
i want child1 to be moved outside of parent2 for example under parent 1 so its like:
<div id="parent1"></div>
<div id="child1">some text in here</div>
<div id="parent2">
</div>
I cannot edit the page source code to alter it so need to do it in jquery or css, any ideas anyone.
thanks
Try this:
$('#child1').insertAfter('#parent1');
You can't modify the DOM using CSS, you can only change how it looks. A jQuery answer has been given, in plain js:
var p = document.getElementById('parent1');
var c = document.getElementById('child1');
if (p && c) {
// insert c as last child of p
p.appendChild(c);
// insert c as first child of p
p.insertBefore(c, p.firstChild);
}
If you want the first option, you can do it as one line but I don't recommend it:
document.getElementById('parent1').appendChild(document.getElementById('child1'));
If you alias the DOM methods, it can be shorter.
$('#child1').insertBefore('#parent2');
you have multiple choices to do this, some of them are fallowing-
$('#parent1').prepend($('#child1'));
$('#child1').prependTo($('#parent1'));
$('#child1').insertAfter($('#parent1'));
fiddle:demo