在创建元素时，是否有更干净的方法将span附加到H3中？感觉好像我把这个函数的代码做得太过了
我有以下代码：
const calendarHeading = (month, year) =>{
let monthH3 = document.createElement('h3')
monthH3.classList.add('calendar__heading-month')
monthH3.innerHTML = monthObjects[month].month
let yearSpan = document.createElement('span')
yearSpan.classList.add('calendar__heading-year')
yearSpan.innerHTML = year
let targetDiv = document.querySelector('.calendar__heading')
targetDiv.appendChild(monthH3)
document.querySelector('.calendar__heading-month').appendChild(yearSpan)
};我正在创建一个H3元素和一个Span元素。
然后，我将h3元素附加到html中已经创建的div。
然后将span附加到新创建的h3节点。
我的问题是，有什么办法可以做到这一点吗？还是我想得太多了，我很抱歉：
回答 3
Stack Overflow用户
发布于 2022-09-02 02:10:49
您将两个单独的元素附加到另外两个单独的元素中，因此至少需要(或者应该)有两个单独的语句。只要写出HTML标记，而不是用.createElement构造元素，就可以很简洁地完成这一任务。
const calendarHeading = (month, year) =>{
document.querySelector('.calendar__heading').insertAdjacentHTML(
'beforeend',
`<h3 class="calendar__heading-month">${monthObjects[month].month}</h3>`
);
document.querySelector('.calendar__heading-month').insertAdjacentHTML(
'beforeend',
`<span class="calendar__heading-year">${year}</span>`
);
};尽管如此，这些代码(以及原始代码)都具有潜在的低俗性--如果year参数或monthObjects对象不可信(例如来自外部API)，则插入HTML可能导致任意代码执行，在某些情况下这将是一个问题。如果这是您可能关心的事情，那么事情就必须变得更加冗长(比如您的原始代码加上使用.textContent而不是.innerHTML)。
Stack Overflow用户
发布于 2022-09-02 02:20:57
那应该够了..。
const calendarHeading = (month, year) =>
{
let targetDiv = document.querySelector('.calendar__heading')
, monthH3 = document.createElement('h3')
monthH3.className = 'calendar__heading-month'
monthH3.innerHTML = `${monthObjects[month].month}<span class="calendar__heading-year">${year}</span>`
targetDiv.appendChild(monthH3)
}Stack Overflow用户
发布于 2022-09-02 02:51:51
这将是一种方法，它并不是确切地减少线条本身，但它感觉不那么复杂。在代码中添加了一些注释，希望您能找到帮助。
我绝不是一个专家，我只是想提供一个不同的观点。
此解决方案使用模板文字和DOMParser对象来实现我认为您所要求的内容。
编码愉快！
const calendarHeading = (month, year) => {
//Not sure what your month object looks like, but adjust as needed
const monthObject = {
Jan: "I am Jan",
Feb: "I am Feb",
Mar: "I am Mar",
}
//Write up your HTML as you desire using template literals
let htmlString = `<h3 class="calendar__heading-month">${monthObject[month]} <span class="calendar__heading-year">${year}</span></h3>`;
//Create a DOMParser object, parse your HTML string
const parser = new DOMParser();
const newNode = parser.parseFromString(htmlString, "text/xml");
//Select target element and append using the new node
let targetDiv = document.querySelector('.calendar__heading')
targetDiv.appendChild(newNode.documentElement);
};
//Log to console
calendarHeading("Jan", 1991)body {
background: transparent;
/* Make it white if you need */
color: #000;
padding: 0 24px;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div class="calendar__heading"></div>
<script src="src/script.js"></script>
</body>
</html>
https://stackoverflow.com/questions/73577116
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号