How to write value of one div into another div

How to write value of one div into another div - javascript

I have the following HTML and I want to pull the value from one div into another and if possible to put a : between them.
It is about to add the value of div class="ITSv" to the value of div class="ITSn"
Source HTML:
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>
Target format:
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Batteryform: Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage: 1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity: 7800 mAh</div>
</div>

You can do the following
Array.from(document.getElementsByClassName('ITSn')).forEach(element => {
element.innerText += ': ' + element.nextElementSibling.innerText;
element.nextElementSibling.remove();
});
<div id="HTML_SPEC"
class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>

Don't need Js. Just try with the css display property after pseudo-element
.ITSn:after {
content: ': '
}
.ITSn,
.ITSv {
display: inline-block;
}
<div id="HTML_SPEC" class="ITSs">
<div class="ITSg">Specifications</div>
<div class="ITSr0">
<div class="ITSn">Battery form</div>
<div class="ITSv">Cylinder</div>
</div>
<div class="ITSg">Batterie</div>
<div class="ITSr0">
<div class="ITSn">battery voltage</div>
<div class="ITSv">1,5 V</div>
</div>
<div class="ITSr1">
<div class="ITSn">Capacity</div>
<div class="ITSv">7800 mAh</div>
</div>
</div>

Related

RemoveChild javascript, if there are no more childnodes dont throw error

function delete(){
let k = document.getElementsByClassName('row');
for(let i=0; i<k.length; i++)
{
if(k[i].hasChildNodes()){
k[i].removeChild(k[i].childNodes[2]);
}
}
}
<div id="table">
<div class="row">
<div class="column">1.1</div>
<div class="column">1.2</div>
<div class="column">1.3</div>
<div class="column">1.4</div>
<div class="column">1.5</div>
</div>
<div class="row">
<div class="column">2.1</div>
<div class="column">2.2</div>
<div class="column">2.3</div>
<div class="column">2.4</div>
<div class="column">2.5</div>
</div>
<div class="row">
<div class="column">3.1</div>
<div class="column">3.2</div>
<div class="column">3.3</div>
<div class="column">3.4</div>
<div class="column">3.5</div>
</div>
<div class="row">
<div class="column">4.1</div>
<div class="column">4.2</div>
<div class="column">4.3</div>
<div class="column">4.4</div>
<div class="column">4.5</div>
</div>
<div class="row">
<div class="column">5.1</div>
<div class="column">5.2</div>
<div class="column">5.3</div>
<div class="column">5.4</div>
<div class="column">5.5</div>
</div>
</div>
<div id="button">
<input type="button" onclick="delete()" value="delete">
</div>
Hi im currently trying to delete every second column with help of the removeChild() method.
If i delte all the columns, i want to have one remaining but the console obviously shows "Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'" since there is no more children remaining if all got deleted.
Now the Question: How can i catch this error; is there something like if(!k[i].hasChildNodes()) or how can i tell the if statement if there are no more childs just print('hello')

It might be easier to use a direct selector to the elements you want to remove instead, with :nth-child(2), and then .remove() all elements matching the selector:
function deleteRow() {
document.querySelectorAll('.column:nth-child(2)').forEach((child) => {
child.remove();
});
}
<div id="table">
<div class="row">
<div class="column">1.1</div>
<div class="column">1.2</div>
<div class="column">1.3</div>
<div class="column">1.4</div>
<div class="column">1.5</div>
</div>
<div class="row">
<div class="column">2.1</div>
<div class="column">2.2</div>
<div class="column">2.3</div>
<div class="column">2.4</div>
<div class="column">2.5</div>
</div>
<div class="row">
<div class="column">3.1</div>
<div class="column">3.2</div>
<div class="column">3.3</div>
<div class="column">3.4</div>
<div class="column">3.5</div>
</div>
<div class="row">
<div class="column">4.1</div>
<div class="column">4.2</div>
<div class="column">4.3</div>
<div class="column">4.4</div>
<div class="column">4.5</div>
</div>
<div class="row">
<div class="column">5.1</div>
<div class="column">5.2</div>
<div class="column">5.3</div>
<div class="column">5.4</div>
<div class="column">5.5</div>
</div>
</div>
<div id="button">
<input type="button" onclick="deleteRow()" value="delete">
</div>

How would I extract the <div> data from this section?

I am trying to setup a discord.js bot that pulls div data based on a class
<template v-if="activeWindow">
<div class="trn-card mb0">
<div class="trn-card__header">
<h3 class="trn-card__header-title">Session {{ activeWindowNumber }}</h3>
<span class="trn-card__header-subline">{{ activeWindow.matchesPlayed }} Matches</span>
</div>
<div class="trn-card__content">
<div class="fn-event-team__stats mb8">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Rank</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.rank }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Points Earned</div>
<div class="fn-event-team__stat-value">{{ activeWindow.pointsEarned }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Eliminations</div>
<div class="fn-event-team__stat-value">{{ activeWindow.kills }}</div>
</div>
</div>
<div class="fn-event-team__stats fn-event-team__stats--small">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">K/D</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.kdRatio }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Kills</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.avgKills }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Placement</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.avgPlacement }}</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Points</div>
<div class="fn-event-team__stat-value">#{{ activeWindow.avgPoints }}</div>
</div>
</div>
</div>
</div>
I'm trying to pull the value from the divs with the class "fn-event-team__stat_value, how would I go about doing so?

You can try out by using the javascript method as follow :
var arr = [];
$("#Button").click(function() {
var items = document.getElementsByClassName('.fn-event-team__stat_value');
for (var i = 0; i < items.length; i++)
arr.push(items[i].value);
});
console.log(arr) ; //you will get all the values of divs .

You can use document.querySelectorAll and map which will return an array. innerHTML will give the content of the div. trim is used to remove any white space.
let vals = [...document.querySelectorAll('.fn-event-team__stat-value')].map(item => item.innerHTML.trim());
console.log(vals)
<div class="trn-card__content">
<div class="fn-event-team__stats mb8">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Rank</div>
<div class="fn-event-team__stat-value">2</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Points Earned</div>
<div class="fn-event-team__stat-value">3</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Eliminations</div>
<div class="fn-event-team__stat-value">4</div>
</div>
</div>
<div class="fn-event-team__stats fn-event-team__stats--small">
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">K/D</div>
<div class="fn-event-team__stat-value">5</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Kills</div>
<div class="fn-event-team__stat-value">6</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Placement</div>
<div class="fn-event-team__stat-value">7</div>
</div>
<div class="fn-event-team__stat">
<div class="fn-event-team__stat-name">Avg. Points</div>
<div class="fn-event-team__stat-value">8</div>
</div>
</div>
</div>

Search for text inside div and all his childs

I would like to hide an entire div when there isn't the text i'm writing inside a input form.
For now i'm able to search inside all childs div and hide every child div if there isn't the text.
But i have a problem right now, example:
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome">
<b>Nome: </b> Davide
</div>
<div class="col-4 regione">
<b>Regione: </b> Reggio
</div>
<div class="col-4 citta">
<b>Città: </b>Citta "
</div>
</div>
<div class="row">
<div class="col-4 dataNascita">
<b>Data di nascita: </b>02-02-1992
</div>
<div class="col-4 coaching">
<b>Coaching online: </b>Sì
</div>
<div class="col-4 sesso">
<b>Sesso: </b>Maschio
</div>
</div>
<div class="row border-bottom">
<div class="col-6 blurry-text cellulare">
<b>Cellulare: </b> 1231231231
</div>
<div class="col-6 blurry-text email">
<b>Email: </b>asdaklsnd#gmail.com
</div>
</div>
<div class="row descriptionText">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'>
<button type='button'>Profilo</button>
</div>
</div>
</div>
if i search Davide all the others childs of the .infos div will be hidden since they doesn't contain the text, but i would like to keep them visible if there is another child that actually contain the text.
I've created an example here for testing : https://jsfiddle.net/hj9r2L4u/6/
I would like to have the possibility to input more words for the search bar, image having 2 users with name Davide, but with different city, i would like to input something like
Da City2
With "Da" i actually show both div, then with City2 i hide the div that doesn't have the text in it.
The code i'm actually using is:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery(".information").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

You could wrap the rows and target this as the containing element, see the snippet below:-
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase();
jQuery('.row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container w-100 h-100">
<input id="searchPt">
<div id="goToProfile">
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="rowWrap">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Davide </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Citta "</div>
</div>
<div class="row">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-02-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>Sì</div>
<div class="col-4 sesso\"><b>Sesso: </b>Maschio</div>
</div>
<div>
<div class="rowWrap">
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdaklsnd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjbdkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
<div class="information">
<div>
<img alt="Immagine profilo">
<div class="results">
<div class="results-content">
<span class="stars">3</span>
</div>
</div>
</div>
<div class="col-9 infos">
<div class="row">
<div class="col-4 nome\"><b>Nome: </b> Simone </div>
<div class="col-4 regione\"><b>Regione: </b> Reggio </div>
<div class="col-4 citta\"><b>Città: </b>Emilia</div>
</div>
<div class="row\">
<div class="col-4 dataNascita\"><b>Data di nascita: </b>02-04-1992</div>
<div class="col-4 coaching\"><b>Coaching online: </b>No</div>
<div class="col-4 sesso\"><b>Sesso: </b>Femmina</div>
</div>
<div class="row border-bottom\">
<div class="col-6 blurry-text cellulare\"><b>Cellulare: </b> 1231231231 </div>
<div class="col-6 blurry-text email\"><b>Email: </b>asdakl12412snd#gmail.com</div>
</div>
<div class="row descriptionText \">
<div class='col-10 descrizione'> aksjdbaksjb15251212612612612dkajs asdasdas </div>
<div class='col-2 align-items-center'><button type='button'>Profilo</button></div>
</div>
</div>
</div>
</div>
</div>

For multiple criteria, do a split and test each value with some short-circuit logic:
jQuery("#searchPt").on("keyup", function() {
var value = $(this).val().toLowerCase().split();
jQuery(".information").filter(function() {
for(var i=0; i<value.length; i++){
if($(this).text().toLowerCase().indexOf(value[i]) === -1) {
$(this).toggle(false)
return false;
}
}
$(this).toggle(true);
return true
});
});

How can I loop through three div boxes at the time

I have a list of 12 posts wrapped in a div tag and the structure looks like this:
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?
At the end I would have my structure like this:
<div class="row">
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
<div class="wrapper">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
</div>
Is there a way I can loop every third div with the class of content in another div tag?

You can do something like this
// get all element at position 1,4,7,...etc and iterate
$('.row .content:nth-child(3n + 1)').each(function() {
$(this)
// get all siblings next to it
.nextAll('.content')
// get only next 2 elements from it
.slice(0, 2)
// combine the current element with it
.add(this)
// wrap all elemnts with the div(3 divs)
.wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content').slice(0, 2).add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
Or you can use jQuery :lt() pseudo-class selector to avoid slice() method.
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
$('.row .content:nth-child(3n + 1)').each(function() {
$(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})
console.log($('.row')[0].outerHTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>

Loop through the children, every third child create a new wrapper and add each child in the respective wrapper.
var test = document.querySelector("#test");
var index = 2;
for (var child of test.querySelectorAll(".content")) {
if (index++ >= 2) {
var newWrapper = test.appendChild(document.createElement("div"));
newWrapper.className = "wrapper";
index = 0;
}
test.removeChild(child);
newWrapper.appendChild(child);
}
console.log(test.innerHTML);
<div class="row" id="test">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>

Try this
function WrapUpAllDivs(){
var CurrentDivs = $(".row",".content");
for(var i = 0; i < CurrentDivs.length -1 ; i+=3) {
CurrentDivs
.slice(i, i+3)
.wrapAll("<div class=\"wrapper\"></div>");
}
}

JavaScript append div contents in another Div and sort the contents based on the Rank order

I have HTML codes like below.
When "Click" is clicked, the parent (div class="studentRow" ref="xxxx") is appended in the (div id="favoriteListContent").
The Rank text may contain some letters. The rank should be sorted using only number. If the Rank value is NO, this should be listed last - lowest rank.
How can I sort the sets of divs based on the Rank value in the (div id="favoriteListContent")? Right now, the divs are displayed in the order they are clicked. (see Demo http://jsfiddle.net/sunflowersh/YeSvH/11/)
<h2>Favorites</h2>
<div id="favoritesList">
<div class="studentRow">
<div class="favRow1"></div>
<div class="positionRow1">Rank</div>
<div class="studentRow1">Name</div>
<div class="todayRow1">Today</div>
<div class="thruRow1">Thru</div>
<div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent"></div>
</div>
<div id="studentList">
<h2>List</h2>
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1050">
<div class="favRow1" ref="1050">click</div>
<div class="positionRow1">D2</div>
<div class="studentRow1">Name C</div>
<div class="todayRow1">A</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-7</div>
</div>
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
</div>
I want to have the end result to be like
<h2>Favorites</h2>
<div id="favoritesList">
<div class="studentRow">
<div class="favRow1"></div>
<div class="positionRow1">Rank</div>
<div class="studentRow1">Name</div>
<div class="todayRow1">Today</div>
<div class="thruRow1">Thru</div>
<div class="totalRow1">Total</div>
</div>
<div id="favoriteListContent">
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
</div>
</div>
and Not
<div class="studentRow" ref="1800">
<div class="favRow2" ref="1800">click</div>
<div class="positionRow2">NO</div>
<div class="studentRow2">Name H</div>
<div class="todayRow2"></div>
<div class="thruRow2"></div>
<div class="totalRow2">+19</div>
</div>
<div class="studentRow" ref="2000">
<div class="favRow2" ref="2000">click</div>
<div class="positionRow2">D2</div>
<div class="studentRow2">Name B</div>
<div class="todayRow2">-2</div>
<div class="thruRow2">F</div>
<div class="totalRow2">-7</div>
</div>
<div class="studentRow" ref="1000">
<div class="favRow1" ref="1000">click</div>
<div class="positionRow1">1</div>
<div class="studentRow1">Name A</div>
<div class="todayRow1">-3</div>
<div class="thruRow1">F</div>
<div class="totalRow1">-9</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to write value of one div into another div - javascript

Related

RemoveChild javascript, if there are no more childnodes dont throw error

How would I extract the <div> data from this section?

Search for text inside div and all his childs

How can I loop through three div boxes at the time

JavaScript append div contents in another Div and sort the contents based on the Rank order

Categories

Resources