How can I get direct child from element section?
I've tried target it by query selector, but it didn't work. For this case I don't want to use class or id.
Am I using it correctly?
I want to target it from section.
Thanks for help.
var section = document.getElementsByTagName("section")[0];
var div = section.querySelector(section + "> div"); //this not work
<section>
<form>
<div></div>
<div></div>
</form>
<div> //I want target this div
<div></div>
<div></div>
</div>
</section>
Use query selector specifying the selector like section > div directly:
var div = document.querySelector("section > div");
console.log(div);
<section>
<form>
<div></div>
<div></div>
</form>
<div id="my-target-element"> //I want target this div
<div></div>
<div></div>
</div>
</section>
If you really want to do that on the section element, get the element and then use the query selector like below, looking directly for the child div element:
const section = document.querySelector('section');
console.log(section.querySelector('section > div'));
// or even
console.log(section.querySelectorAll('div')[2]);
<section>
<form>
<div></div>
<div></div>
</form>
<div id="my-target-element"> //I want target this div
<div></div>
<div></div>
</div>
</section>
You are concatenating section.querySelector(section + "> div") a string with and object which is not work in querySelector
BTW if you use section.querySelector("div") it will return the first div of the elements so what you want is section.querySelectorAll("div")[2] which point to third div see the example in two parts, the second one is yours.
var section = document.getElementsByTagName("section")[0];
var div = section.querySelector("div"); //this not work
console.log(div);
//What you want
var section = document.getElementsByTagName("section")[0];
var div = section.querySelectorAll("div"); //this not work
var target = div[2];
console.log(target);
<section>
<form>
<div>1</div>
<div>2</div>
</form>
<div> I want target this div
<div>3</div>
<div>4</div>
</div>
</section>
in the other side you can set an id for that div and directly find it by getElementById but from you mentioned you don't want find it by class or id.
UPDATE:
At least there should be an info about your target div to be able find it either added dynamically or statically, if you can not define class or id it is good to define and attribute like <dive attName='value'></div> or you can find it by content.
Therefore there should be a specific position for your target div it is not possible to find a div when you don't have any information about it. if that div have specific content you can iterate all div in a for and check it, but the best way is defining class or id for that div or at least defining an attribute for it.
var div = section.querySelector("section > div");
Related
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.
I have a list of several div tags, and some text with an url within each div. Something like (looking for the 4th div with "123" in url):
<div></div>
<div></div>
<div></div>
<div>Text added here</div>
<div></div>
How could it be possible to identify a specific div (for example the one, which url has the string "123" in it) and to inject some html (e.g. "Text added here") in this div?
You can use the attribute value contains css selector [attribute*=value] here is an example:
const textToAdd = "Text added here";
const anchor = document.querySelector("[href*='123']");
anchor.textContent = textToAdd;
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
You can try with Attribute selectors (contains).
[attr*=value]
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
Demo:
var el = document.querySelector('a[href*="123"]');
el.parentNode.insertAdjacentHTML('beforeend', 'New Text added');
<div></div>
<div></div>
<div></div>
<div>Text added here</div>
You can do this easily with CSS or JS using attribute selectors:
document.querySelector('a[href*="/5drs37/"]').textContent = "Text added here via JS";
a[href*="/aaa123/"]:after {
content: "Text added here via CSS";
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
first you put all div in a div container and set a id for it.
write foreach loop for every div in div container.
in foreach loop get first child or find tag a and get href it.
$('#div-container').find('div').each(function(){
url = this.firstChild.href;
if(url.includes('534')) {
this.firstChild.text = "some text"
}
});
Could not find this anywhere
Say I have 5 divs like so
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
my jquery selector
$('.wrapper div:nth-child(3)')
This is great but how do I select all the divs besides nth-child(3)?
I know I can combine two filters as follow:
$('.wrapper div:gt(3)')
$('.wrapper div:lt(3)')
and I tried chainning :nth-child():not() it returns the nth-child
Is there a better way of doing it?
This will do it:
$('.wrapper > div:not(:nth-child(3))')
The > is necessary if you actually want only the direct children and not all matching div descendants that are not the third child of their immediate parent element.
Updated
The code I have come up with is:
<section id="Test">
<header>Welcome</header>
<p>This is a test</p>
<div>Nothing here</div>
</section>
var element = document.getElementById("Test");
var elements = <HTMLCollection>element.getElementsByTagName("*");
I want the collection to include <section>, <header>, <p>, and <div> the above code only has <header>, <p>, and <div>. Is there anyway I can add the <section> itself to the collection?
The problem is that I want to include the element itself into the elements collection. I know I can use outerHTML and put it in a temp container and then get all the element inside from that but i'm looking for a cleaner way.
You can use a comma-separated list with querySelectorAll, where the first item is the element itself.
This Snippet uses your HTML to retrieve section Test and its children: header, p, and div:
var elements= document.querySelectorAll('#Test, #Test *');
console.log(elements.length); //4
<section id="Test">
<header>Welcome</header>
<p>This is a test</p>
<div>Nothing here</div>
</section>
I have html that generates <div> codes like this
<div>
<div>
<div id ="title"> This is my Title</div>
</div>
<div id ="description"> This is Description</div>
</div>
and I need to get the content of those div sometimes the div id change or sometimes give no id. My question is how can I get the value or the content of that div if the div's id changes every time I load the page or is there any way or idea on how can I achieve it and I need to know if that div contains description or title? I think it's hard to implement.
If you could add an id or a class to the parent element of those divs.
<div id='wrapper'>
<div>
<div id ="title"> This is my Title</div>
</div>
<div id ="description"> This is Description</div>
</div>
You could:
var title_html = $('.wrapper').find('div#title').html();
var desc_html = $('.wrapper').find('div#description').html();
And the you may check the values of those variables.
In case the id is completely random but the structure is static you could:
var contents_one = $('wrapper').children().get(0).children().get(0).html();
var contents_two = $('wrapper').children().get(1).html();