We Keep Coding

Split and display Child ID from Parent ID

I have a div with ID as "parentID" to the parent div and based on this, I am dynamically adding "ChildID" to all its child divs along with its "parentID".
jQuery(document).on('click', '.split-id', function() {
var parentID = jQuery('.parent').attr('id');
var childID = jQuery('.child').attr('id', jQuery(this).closest('.parent').attr('id') + 'ChildID');
jQuery('#displayParentID').html('Parent ID : ' + parentID);
jQuery('#displayParentChildID').html('Parent Child ID : ' + childID);
jQuery('#displayOnlyChildID').html('Child ID only : ' + childID);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent" id="parentID">
<div class="child"></div>
<div class="child"></div>
</div>
<div id="displayParentID"></div>
<div id="displayParentChildID"></div>
<div id="displayOnlyChildID"></div>
Split
How can I get all child element IDs without parent div IDs? like below onClicking of Split tag...
Parent ID : parentID
Parent Child ID : parentIDChildID
Child ID only : ChildID (This is what I am expecting)
Fiddle

Don't know what exactly is purpose of what you are asking, but you can replace your js code in your fiddle with this and it works as you expected.
* Mind that, when you use attr function to set a property it is returning Object, not only string label.
* If you will give multiple children the same id it will not work, because in html code ids need to be unique
jQuery(document).on('click', '.split-id', function () {
var parentID = jQuery('.parent').attr('id');
var childElement = jQuery('.child').attr('id', parentID + 'ChildID');
var childID = childElement.attr('id');
jQuery('#displayParentID').html('Parent ID : ' + parentID);
jQuery('#displayParentChildID').html('Parent Child ID : ' + childID);
jQuery('#displayOnlyChildID').html('Child ID only : ' + childID.replace(parentID, ''));
});
If you have some more questions, go on and ask.

Get data-value from element in another file with jQuery

So basically I have some elements with some data-values in a file . I want to dynamically create links to them using those data-values to type the text, href etc.
For example, I have two divs, id'ed firstand second. They have importance values, respectively "most important" and "least important".
I want to create two links to them, with the phrase "This is a link to the most/least important div" using JavaScript/jQuery. Below is a non-working example.
File a.html (ommiting headings and such, ofc):
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
File b.html:
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>
$(`.makelink`).each( function(){
var target = $(this).data('linkto');
$(this).attr('href','b.html#' + target);
var imp = $('b.html #' + target).data('importance');
$(this).html('Link to the ' + imp + ' div');
});
However nothing happens. Any help is appreciated.

Your code seems correct except the selector should be inside quote and the string generated in the html() is not properly formatted:
$('.makelink').each( function(){ // Enclosed the selector with single/double qoute
var target = $(this).data('linkto');
$(this).attr('href','#' + target);
var imp = $('#' + target).data('importance');
$(this).html('Link to the '+ imp + ' div'); // concatenate the string with the variable using +
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='first' data-importance='most important'>This is the first div.</div>
<div id='second' data-importance='least important'>This is the second div.</div>
<p><a class='makelink' data-linkto='first'></a></p>
<p><a class='makelink' data-linkto='second'></a></p>

jQuery .html() function removing text

I am trying to edit the div's text, but when i use my function to update the rowcount, everytime the text vanihes completely. Would by nice if you could also explain why.
Thanks in advance.
My update function:
var rowCountF = $('#tablef tr').length;
var rowCountV = $('#tablev tr').length;
var ftext = "Teilnehmer (" + String(rowCountF) + ")";
var vtext = "Teilnehmer (" + String(rowCountV) + ")";
$("#divf").html(ftext);
$("#divv").html(vtext);
My div layer:
<div id="divf"class="tableheader"> <h2>Teilnehmer</h2> </div>
Code for divf:
<div id="divf"class="tableheader"> <h2>Teilnehmer</h2> </div>

You are actually replacing the contents of the div itself with your text. This means the heading disappears and there is only plain text.
Probably you wanted to replace the heading contents:
$("#divf h2").html(ftext);
$("#divv h2").html(vtext);
This will select the h2 elements inside the divs and hence will update only the text inside the headings.
The result will look like the following:
<div id="divf"class="tableheader"> <h2>Teilnehmer (987)</h2> </div>
<div id="divf"class="tableheader"> <h2>Teilnehmer (123)</h2> </div>

.html() sets the HTML, meaning it replaces anything that's currently there. If you want to add to the HTML, you'll need to set the HTML to what's already there plus what you're adding, like so:
var rowCountF = $('#tablef tr').length;
var rowCountV = $('#tablev tr').length;
var ftext = "Teilnehmer (" + rowCountF + ")";
var vtext = "Teilnehmer (" + rowCountV + ")";
//Get already-existing HTML
var divfHtml = $("#divf").html();
var divvHtml = $("#divv").html();
//Set the new HTML to the existing + the new text
$("#divf").html(divfHtml + ftext);
$("#divv").html(divvHtml + vtext);
If you only want to replace the heading, then just target the <h2> as Martin Zikmund suggested in his answer.

You need to reference the h2 for the div. using .html() will replace ALL of the html inside the #divf which in this case means it will replace the h2
$("#divf h2").html(ftext);
$("#divv h2").html(vtext);
Example: https://jsfiddle.net/qhef0toc/3/

selecting a html link with a particular id and a html tag value

I have a HTML code snippet like this:
<div class="chartPeriodChangeOptions" id="id1">
D
W
</div>
<div class="chartPeriodChangeOptions" id="id2">
D
W
</div>
I am trying to add a class="active", to link with id="id1" and data-period="day".
With the following code, I am able to choose the one with particular data value
$("a[data-period='" + someMethod() + "']").addClass("active");
How can I add id selection part to this as well.

Try this:
$("#id1 > a[data-period='" + someMethod() + "']").addClass("active")

If you want this to be extensible use the 'starts with' selector:
$("div[id^='id'] > a[data-period='" + someMethod() + "']").addClass("active");
This will accept id="id1", id="id2", id="id3", ... etc

use this:
$(document).ready(function(){
$("#id1 a[data-period='" + someMethod() + "']").addClass("active");
});

Replace a <div> with another (in Jquery)

Currently i have this (in a function):
$('#Ligne' + Ligne_Doublons).remove(); //Remove the Div
$('#Panier').append('<div id=\'Ligne' + Ligne_Doublons + '\'><div class="ABC">' + Qte + '</div><div class="ABC">' + Nom + '</div></div>'); //Add de New Div
Example :
I have 3 div :
<div 1>
<div 2>
<div 3>
After the function who change the "div 2", the code make this:
<div 1>
<div 3>
<New div 2>
But i want this :
<div 1>
<New div 2>
<div 3>
Do you know how i can make this?
Thanks ;)

http://api.jquery.com/replaceWith/
$('#Ligne' + Ligne_Doublons)
.replaceWith('<div id=\'Ligne' + Ligne_Doublons + '\'><div class="ABC">' + Qte + '</div><div class="ABC">' + Nom + '</div></div>')

You need to use the after() method:
$('selector_to_div_1').after('div_2');

I think you need to replace div 2 with another one.
Let's say you have the following HTML code
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-3"></div>
Then the jQuery code should be as following:
$('element-2').replaceWith($('<div class="new-element-2"></div>');
Hope that helps.

If you want to preserve the contents and data/events attached to the contents then try
$('#d2').replaceWith(function(){
return $('<div />').append($(this).contents())
})
Demo: Fiddle

I think that the problem is you're removing a div, then trying to append a new div after the one you've just removed.
Therefore, if you append the new div to the old one, then remove the old one it should be in the right place.