html点击按钮后，内容自动添加到现有的li标签内的span中进行显示？
html点击按钮后，内容自动添加到现有的li标签内的span中进行显示，，，输入内容后，点击转换预览后，把下面的[字体样式预览]全换成输入的新内容进行展示
第1个回答 2023-08-25
要实现这个功能，你需要使用JavaScript来监听按钮的点击事件，并在事件处理程序中将输入内容添加到指定的<span>标签中。以下是一个示例代码，可以帮助你实现这个功能：
html<!DOCTYPE html>
<html>
<head>
<title>自动添加内容到现有标签</title>
<style>
/* 样式设置 */
.input-container {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" id="inputContent" placeholder="输入新内容">
<button onclick="addContent()">转换预览</button>
</div>
<ul>
<li><span>原始内容</span></li>
<li><span>原始内容2</span></li>
<!-- 更多的li标签... -->
</ul>
<script>
function addContent() {
// 获取输入框中的内容
var inputContent = document.getElementById("inputContent").value;
// 获取所有的li标签和对应的span标签
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
var spanElement = listItems[i].getElementsByTagName("span")[0];
// 将输入的内容替换掉原有的内容
spanElement.innerHTML = inputContent;
}
}
</script>
</body>
</html>
在上面的代码中，我们首先定义了一个输入框和一个按钮，用于接收用户输入的新内容和触发按钮的点击事件。然后，我们通过JavaScript编写了一个名为addContent()的函数，该函数会在点击按钮时被调用。在函数内部，我们获取输入框中的内容，并遍历所有的<li>标签，找到其中的<span>标签，并将输入的内容替换掉原有的内容。这样，每次点击按钮后，输入的新内容就会自动添加到现有的<li>标签内的<span>中进行显示。
html<!DOCTYPE html>
<html>
<head>
<title>自动添加内容到现有标签</title>
<style>
/* 样式设置 */
.input-container {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" id="inputContent" placeholder="输入新内容">
<button onclick="addContent()">转换预览</button>
</div>
<ul>
<li><span>原始内容</span></li>
<li><span>原始内容2</span></li>
<!-- 更多的li标签... -->
</ul>
<script>
function addContent() {
// 获取输入框中的内容
var inputContent = document.getElementById("inputContent").value;
// 获取所有的li标签和对应的span标签
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
var spanElement = listItems[i].getElementsByTagName("span")[0];
// 将输入的内容替换掉原有的内容
spanElement.innerHTML = inputContent;
}
}
</script>
</body>
</html>
在上面的代码中，我们首先定义了一个输入框和一个按钮，用于接收用户输入的新内容和触发按钮的点击事件。然后，我们通过JavaScript编写了一个名为addContent()的函数，该函数会在点击按钮时被调用。在函数内部，我们获取输入框中的内容，并遍历所有的<li>标签，找到其中的<span>标签，并将输入的内容替换掉原有的内容。这样，每次点击按钮后，输入的新内容就会自动添加到现有的<li>标签内的<span>中进行显示。
相似回答
大家正在搜