HTML to JavaScript Converter (Free AI Tool)

<div class="card">
  <h2 id="title">Welcome</h2>
  <p class="description">This is a card component.</p>
  <button onclick="handleClick()">Click Me</button>
</div>

// JavaScript DOM creation
const div = document.createElement('div');
div.className = 'card';

const h2 = document.createElement('h2');
h2.id = 'title';
h2.textContent = 'Welcome';

const p = document.createElement('p');
p.className = 'description';
p.textContent = 'This is a card component.';

const button = document.createElement('button');
button.textContent = 'Click Me';
button.addEventListener('click', handleClick);

div.appendChild(h2);
div.appendChild(p);
div.appendChild(button);

<ul class="menu">
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li class="active"><a href="/contact">Contact</a></li>
</ul>

// JavaScript component factory
function createMenu() {
  const ul = document.createElement('ul');
  ul.className = 'menu';
  
  const items = [
    { text: 'Home', href: '/home' },
    { text: 'About', href: '/about' },
    { text: 'Contact', href: '/contact', active: true }
  ];
  
  items.forEach(item => {
    const li = document.createElement('li');
    if (item.active) li.className = 'active';
    
    const a = document.createElement('a');
    a.href = item.href;
    a.textContent = item.text;
    
    li.appendChild(a);
    ul.appendChild(li);
  });
  
  return ul;
}