当前位置：首页 > 行业动态 > 正文

html和js互转

admin
行业动态
2025-05-05
1

HTML与JS互转核心为DOM操作：通过 document.createElement等API将JS对象转为HTML节点，利用 innerHTML或模板引擎渲染数据；反之用 querySelector获取节点，通过 textContent、 dataset等属性提取信息，结合事件监听和

HTML与JavaScript互转详解

HTML转JavaScript

将静态HTML结构转换为JavaScript代码,通常用于动态操作DOM元素。

HTML元素	JavaScript表达	说明
`<div id="box">文字</div>`	`document.getElementById('box').textContent = '文字'`	通过ID获取元素并设置文本
`<button class="btn">提交</button>`	`document.querySelector('.btn').innerText = '提交'`	通过类选择器获取按钮并设置内容
`<input type="text" value="默认值">`	`document.querySelector('input').value = '默认值'`	获取输入框并设置默认值

示例：动态创建表格

<table>
  <tr><td>静态数据</td></tr>
</table>

// JS创建相同表格
const table = document.createElement('table');
const row = table.insertRow();
const cell = row.insertCell();
cell.textContent = '静态数据';
document.body.append(table);

JavaScript转HTML

将JS生成的动态内容转换为静态HTML结构。

JavaScript代码	等效HTML结构	说明
`element.setAttribute('class', 'active')`	`class="active"`	将JS设置的属性转为HTML属性
`element.innerHTML = '<strong>加粗</strong>'`	`<strong>加粗</strong>`	将JS插入的HTML转为静态标签
`parent.appendChild(newElement)`	`<!-新元素会插入到此处 -->`	JS动态添加的元素需手动写入HTML

示例：JS生成列表转为HTML

const list = document.createElement('ul');
list.innerHTML = '<li>项1</li><li>项2</li>';
document.body.append(list);

<!-等效静态HTML -->
<ul>
  <li>项1</li>
  <li>项2</li>
</ul>

核心转换对照表

操作类型	HTML写法	JavaScript实现
创建元素	`<div></div>`	`document.createElement('div')`
设置文本内容	`element.textContent = '内容'`
设置属性	`id="myId"`	`element.setAttribute('id','myId')`
添加样式	`style="color:red"`	`element.style.color = 'red'`
事件绑定	`onclick="func()"`	`element.addEventListener('click', func)`