在页面上清除多行数据

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>添加p标签</title>  
</head>  
<body>  
     
    <button onclick="clearDivContent('div1')">清空</button>
<!--注意这里只能单引号,不能双引号-->
    <button onclick="test()">添加数据</button>
    <div id="div1"></div>  
    <div id="div2"></div> 
    <script src="清空.js"></script>  
</body>  
</html>

页面代码如上,注意双引号之间的单引号,"清空.js"代码如下,将innerHTML设为空将两个div标签之间的内容都删掉,也就是删除多行文本

function clearDivContent(divId) {  
    var divElement = document.getElementById(divId);  
    if (divElement) {  
        divElement.innerHTML = '';  
    } else {  
        console.error('找不到指定的div元素:', divId);  
    }  
}  
function test(){
    // 获取两个div元素  
    var div1 = document.getElementById('div1');  
    var div2 = document.getElementById('div2');  
    
    // 创建并添加p标签到div1  
    for (var i = 0; i < 3; i++) { // 假设你想在div1中添加3个p标签  
        var p = document.createElement('p');  
        p.textContent = '这是div1中的第' + (i + 1) + '个p标签';  
        div1.appendChild(p);  
    }  
    
    // 创建并添加p标签到div2  
    for (var i = 0; i < 2; i++) { // 假设你想在div2中添加2个p标签  
        var p = document.createElement('p');  
        p.textContent = '这是div2中的第' + (i + 1) + '个p标签';  
        div2.appendChild(p);  
    }
}

相关推荐

  1. 页面清除数据

    2024-04-13 17:54:01       13 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-13 17:54:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-13 17:54:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-13 17:54:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-13 17:54:01       20 阅读

热门阅读

  1. isinstance函数详解

    2024-04-13 17:54:01       14 阅读
  2. LeetCode 17.电话号码的字母组合

    2024-04-13 17:54:01       13 阅读
  3. ActiveMQ消息中间件面试专题

    2024-04-13 17:54:01       13 阅读
  4. Android 自定义解析html标签

    2024-04-13 17:54:01       12 阅读
  5. golang 协程题目

    2024-04-13 17:54:01       14 阅读
  6. 自用-常用词

    2024-04-13 17:54:01       9 阅读