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?

Yes, you can find the parent element and get its children, go through its attributes and you can have the data. My question is why you wanna do like that, what problem are you trying to solve? — Karthi Keyan, Aug 12 '20 at 04:56
@KarthiKeyan My problem is I want to get the data and make them to DOM element, so it's readable by users — , Aug 12 '20 at 05:03

score 0 · Answer 1 · answered Aug 12 '20 at 05:28

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>

score 0 · Accepted Answer · answered Aug 12 '20 at 05:29

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>

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

2 Answers2