How to write value of one div into another div

Question

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>

callback · Accepted Answer · 2019-06-22T12:41:34.987

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>

score 2 · Answer 2 · answered Jun 22 '19 at 12:28

2

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>

answered Jun 22 '19 at 12:28

User863

19,346
2
17
41

Thank you for your help. But in the application where I have this code, Im just able to add an additinoal js code. – TronicM Jun 22 '19 at 12:34
You can do that in multiple ways. Check [here](https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript) – User863 Jun 22 '19 at 12:45

How to write value of one div into another div

2 Answers2