html点击 代码怎么写,点击按钮向div中写入Html代码

本文介绍了一个使用JavaScript和AJAX实现动态向网页div元素内插入HTML内容的方法。通过点击按钮触发事件,利用AJAX向服务器发送POST请求并接收返回的数据,然后解析数据并将其转换为HTML格式,最终显示在页面上。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

点击按钮向div中写入Html代码

点击div代码

1层

将要写入Html样式的代码

点击写入div事件

function qiehuan(name) {

$('#floorQie').val(name);

$.ajax({

type: "POST",

url: '../test/api',//接口请求的地址

data: {'id': id, 'name': name},//接口请求的参数

dataType: "json",

success: function (data) {

if (data.code == 0) {

//获取接口返回的JSON数据

var peoplemap = data.data;

var roomStr = "";

//循环样式加入

for (var i = 0; i < peoplemap.length; i++) {

roomStr = roomStr + "

}

//向div中写入Html样式代码

$('#renshuInner').html(roomStr)

} else {

layer.msg(data.msg);

}

}

});

}

来源:oschina

链接:https://my.oschina.net/u/3204029/blog/4714959

好的,你可以将以下代码复制粘贴到原来的 HTML 文件中的 `<head>` 和 `<body>` 标签之间: ```html <!DOCTYPE html> <html> <head> <title>Math Board</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <meta charset="utf-8" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> --> <script type="text/javascript" src="./src/code.js" defer></script> <!-- MathJax --> <script id="MathJax-script" type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script> <script type="text/javascript"> function createBox() { var inputText = document.getElementById('input').value; var textElement = document.createElement('div'); textElement.innerHTML = inputText; document.body.appendChild(textElement); } </script> </head> <body> <div id="env"> <canvas id="painting-area"></canvas> </div> <div id="bar"> <div id="paint"> <button onclick="changeTool(0)">文本框</button> <button onclick="changeTool(1)">画笔</button> <button onclick="changeTool(2)">橡皮擦</button> </div> <div id="text"> <form name="form" onsubmit="return false;"> <textarea id="input" autofocus></textarea> <button id="button" onclick="createBox();">▷</button> </form> </div> </div> </body> </html> ``` 在这段代码中,我添加了一个 `createBox()` 函数,它会在点击"▷"按钮时创建一个 `<div>` 元素,其中包含文本框中输入的内容,并将其添加到页面的 `<body>` 中。请确保将这段代码替换原来的 HTML 文件中的相应部分,并保存文件。然后你可以在浏览器中打开修改后的 HTML 文件来查看效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值