首页 > 代码编程 > 前端开发 > js创建一个元素(用JavaScript动态添加标题)

js创建一个元素(用JavaScript动态添加标题)

2023-07-02 前端开发 39 ℃ 0 评论

// 创建标题元素

var titleElement = document.createElement("h1");

titleElement.textContent = "JavaScript的神奇之处";

// 创建文章内容

var articleElement = document.createElement("div");

var articleLength = Math.floor(Math.random() * 1501) + 1500; // 1500-3000字随机

var remainingLength = articleLength;

while (remainingLength > 0) {

var sectionLength = Math.min(remainingLength, Math.floor(Math.random() * 301) + 200); // 每个段落200-500字随机

var sectionElement = document.createElement("div");

var sectionTitle = document.createElement("h2");

sectionTitle.textContent = "第" + (articleElement.children.length + 1) + "段";

var sectionContent = document.createElement("p");

// 生成随机内容

var sectionText = "";

for (var i = 0; i < sectionLength; i++) {

sectionText += String.fromCharCode(Math.floor(Math.random() * 26) + 97);

}

sectionContent.textContent = sectionText;

sectionElement.appendChild(sectionTitle);

sectionElement.appendChild(sectionContent);

articleElement.appendChild(sectionElement);

remainingLength -= sectionLength;

}

// 将标题和文章内容添加到页面中

var bodyElement = document.querySelector("body");

bodyElement.appendChild(titleElement);

bodyElement.appendChild(articleElement);

炮渣日记