如何将一个div的值写入另一个div

Question

我有下面的HTML，我希望将这个值从一个div拉到另一个div中，如果可能的话，在它们之间放置一个:。

它即将将div class="ITSv"的值添加到div class="ITSn"的值中。

源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>

​

目标格式：

<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>

​

Answer 1

您可以执行以下操作

​

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>

​

Answer 2

不需要Js。只需尝试使用css display属性after伪元素即可。

​

.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>

​