Get data of element and change it to HTML DOM & custom

Question

For example, i have a code like this:

<div id='variant'>
  <div class='color' value='Red'></div>
  <div class='type' value='Normal'></div>
  <div class='version' value='1.0'></div>
</div>

<div id='accept'></div>
<a id='sure'></a>

I want to get all of the class and value from the child, and change it to HTML DOM and custom text to #accept and #sure like this:

<div id='variant'>
  <div class='color' value='Red'></div>
  <div class='type' value='Normal'></div>
  <div class='version' value='1.0'></div>
</div>

<div id='accept'>
 <div class='child'>
  <p>Color</p>
  <span>Red</span>
 </div>
 <div class='child'>
  <p>Type</p>
  <span>Normal</span>
 </div>
 <div class='child'>
  <p>Version</p>
  <span>1.0</span>
 </div>
</div>
<a id='sure'>Color: Red, Type: Normal, Version: 1.0</a>

Can I do that using jQuery?

Answer 1

Try this:

 function addDOM() { let accept = $("#accept"); let getFrom = $("#variant").children(); let sureText = ""; getFrom.each(function(index) { let classVal = $(this).attr("class"); let valueVal = $(this).attr("value"); let childWrapper = "<div class='child'><p>" + classVal + "</p><span>" + valueVal + "</span></div>"; accept.append(childWrapper); if (index,= 0) { sureText += "; ": } sureText += classVal + "; " + valueVal; }). $("#sure");text(sureText); } addDOM();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='variant'> <div class='color' value='Red'></div> <div class='type' value='Normal'></div> <div class='version' value='1.0'></div> </div> <div id='accept'></div> <a id='sure'></a>

Answer 2

A possible solution without jQuery would be.

 // https://stackoverflow.com/a/1026087/8062659 function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } const variant = document.getElementById("variant"); const accept = document.getElementById("accept"); const sure = document.getElementById("sure"); const acceptChildren = []; const sureTexts = []; for (const child of variant.children) { let attribute = child.getAttribute("class"); let value = child.getAttribute("value"); attribute = capitalizeFirstLetter(attribute); value = capitalizeFirstLetter(value); const div = document.createElement("div"); const p = document.createElement("p"); const span = document.createElement("span"); p.innerHTML = attribute; span.innerHTML = value; div.append(p, span); div.classList.add("child"); acceptChildren.push(div); sureTexts.push(`${attribute}: ${value}`); } accept.append(...acceptChildren); sure.innerHTML = sureTexts.join(", ");

 .child { background-color: gray; }.child p { background-color: green; }.child span { background-color: orange; }

 <div id="variant"> <div class="color" value="Red"></div> <div class="type" value="Normal"></div> <div class="version" value="1.0"></div> </div> <div id="accept"></div> <a id="sure"></a>