| JSON |
HTML |
JS |
|
```json
{ "tagName": "div", "attributes": { "class": "square" } }
```
|
```html
```
|
```javascript
const element = document.createElement('div');
element.classList.add('square');
```
|
|
```json
{ "tagName": "p", "innerText": "Hello, World!" }
```
|
```html
Hello, World!
```
|
```javascript
const element = document.createElement('p');
element.innerHTML = 'Hello, World!';
```
|
|
```json
{
"tagName": "a",
"children": [{ "tagName": "button", "innerText": "Subscribe" }]
}
```
|
```html
```
|
```javascript
const buttonElement = document.createElement('button');
element.innerHTML = 'Subscribe';
const anchorElement = document.createElement('a');
anchorElement.appendChild(buttonElement);
```
|
|
```json
{
"tagName": "html",
"children": [
{
"tagName": "head",
"children": [{ "tagName": "title", "innerText": "Sample" }]
},
{
"tagName": "body",
"children": [
{ "tagName": "header" },
{ "tagName": "main" },
{ "tagName": "footer" }
]
}
]
}
```
|
```html
Sample
```
|
```javascript
const titleElement = document.createElement('title');
titleElement.innerHTML = 'Sample';
const headElement = document.createElement('head');
headElement.appendChild(titleElement);
const headerElement = document.createElement('header');
const mainElement = document.createElement('main');
const footerElement = document.createElement('footer');
const bodyElement = document.createElement('body');
bodyElement.appendChild(headerElement);
bodyElement.appendChild(mainElement);
bodyElement.appendChild(footerElement);
const htmlElement = document.createElement('html');
htmlElement.appendChild(headElement);
htmlElement.appendChild(bodyElement);
```
|