Retrieve child node from parent node - javascript

I have created a document with html. I want to retrieve child node from the root node for that I am using following code...
That is HTML.
<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
javascript.
function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}
However, That is not working. I have tried finding the problem but cant solve it... Any help ?

If you want to get the first child element only:
var element = document.getElementById('Main1').children[0];
If you want to get the first anchor element:
var element = document.getElementById('Main1').getElementById('Middle1');

getElementById is a method of Document, not Element. Try this:
<script type="text/javascript">
function RetrieveElement(element){
window.alert(document.getElementById("Middle1").innerHTML);
}
</script>
<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
I'm Middle.
</div>
<div id="Bottom1">
</div>

Can you use jQuery?
It would be as easy as this

Related

modify / move an existing html tag in the DOM (javascript)

I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))

Enclose whole div in an <a>

I have a div which I want to surround with an <a href>. I have the jQuery to add the <a href> after the div but I struggle to set it before and close it after the div.
This is the jQuery code I have:
$('.box_service').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
It results in this HTML:
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
However my goal is this structure:
<div class="row">
<a href="example.com">
<div class="box_service">
<div class="inner-row"></div>
</div>
</a>
</div>
I can't enter the div before because there are more boxes in this row so I would add the <a href> to everything in there
The issue is due to your call to contents() which means you're wrapping the elements inside .box_service, not that element itself. Remove that method call.
Also note that each() is redundant, you can do what you require in a single line:
$('.box_service').wrap('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
Box service #1
<div class="inner-row">Inner row #1</div>
</div>
</div>
<div class="row">
<div class="box_service">
Box service #2
<div class="inner-row">Inner row #2</div>
</div>
</div>
.content will wrap the contents of your div, you want to wrap the div with <a> so call wrap on the div not on contents.
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<div class="inner-row"></div>
</div>
</div>
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
You just need to remove contents() in between $(this).wrap() because contents() mean that you are wrapping the children of $(this).
Remove .contents() in order to wrap around each element with the class box-service:
$('.box_service').each(function() {
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
$('.box_service').wrap('');

JQUERY append data before sibling

I have got this html code
<div class="chatp">
<div class="chatpart">
</div>
</div>
And in my jquery i am trying to append
<div class='headchat'>
</div>
Inside chatp but it appends it after chatpart and here is what happens
<div class="chatp">
<div class="chatpart">
</div>
<div class='headchat'>
</div>
</div>
What i want is
<div class="chatp">
<div class='headchat'>
</div>
<div class="chatpart">
</div>
</div>
You can use prepend to append in start.
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
Reference: https://api.jquery.com/prepend/
Example:
<div class="chatp">
<div class="chatpart">
</div>
</div>
<script>
$('.chatp').prepend('<div class="headchat"></div>');
</script>
Use Jquery prepend function $
$(".chatp").prepend("<div class='headchat'> </div");

Get parent div recursively

I have this HTML
<div id="main-container">
<div style="style-here" data-status="active" data-state="loaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="active" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
<div style="style-here" data-status="inactive" data-state="unloaded">
<div style="style-here">
<div style="style-here" {{click_event}}></div>
</div>
</div>
</div>
On click on one of the elements that has {{click_event}} I want to search recursively till I can find an element that has data-status or data-state, and in the worst case when I meet the id from top to stop de search.
The HTML is made generated from another JS file and I can't change the way is made it. Is there a way with closest or parent from jQuery to search after data attribute?
Thank you.
No need for recursion, you can use closest():
$clickedElement.click(function() {
var $parent = $(this).closest('[data-status], [data-state], #main-container');
});

Get sister element using jQuery

Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>
$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/
Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()

Categories