这是一个简单的示例,使用JavaScript实现了点击按钮时追加1行文本,不点击时追加3行文本的功能。
HTML代码:
追加行示例
JavaScript代码(script.js):
// 获取按钮和输出区域的引用
var btn = document.getElementById("btn");
var output = document.getElementById("output");
// 给按钮添加点击事件监听器
btn.addEventListener("click", function() {
// 创建新的行元素
var row = document.createElement("p");
row.textContent = "这是新的一行文本";
// 将新行追加到输出区域
output.appendChild(row);
});
// 页面加载时追加3行文本
for (var i = 0; i < 3; i++) {
var row = document.createElement("p");
row.textContent = "这是新的一行文本";
output.appendChild(row);
}
这段代码首先获取了按钮和输出区域的引用,然后给按钮添加了一个点击事件监听器。当按钮被点击时,会创建一个新的元素,设置其文本内容,然后将其追加到输出区域中。
在页面加载时,会使用循环追加3行初始文本到输出区域。
你可以将上述代码复制到一个文件中,然后在浏览器中打开该文件,点击按钮即可看到效果。