Imperative DOM Manipulation

[codeCraft-Ritik]

Description:

The project builds the UI by creating every element one by one using document.createElement. This is difficult to read and makes the HTML structure hard to visualize in the script.

(content.js) - Improved Code:

function dynamicClothingSection(ob) {
  const boxDiv = document.createElement("div");
  boxDiv.id = "box";
  boxDiv.innerHTML = `
    <a href="/contentDetails.html?${ob.id}">
      <img src="${ob.preview}" />
      <div id="details">
        <h3>${ob.name}</h3>
        <h4>${ob.brand}</h4>
        <h2>rs ${ob.price}</h2>
      </div>
    </a>
  `;
  return boxDiv;
}