在JavaScript中，你可以使用DOM（文档对象模型）来创建新的HTML元素并将其添加到页面中。以下是通过JavaScript创建新元素并将其添加到页面的步骤：
创建新元素： 使用
document.createElement()方法创建一个新的HTML元素。设置元素属性： 使用
element.setAttribute()方法设置新元素的属性（如果需要）。设置元素内容： 如果新元素是包含文本内容的元素，可以使用
element.textContent或element.innerHTML设置其内容。将元素添加到DOM中： 使用
parentElement.appendChild()或其他方法将新元素添加到DOM中。
以下是一个简单的示例，演示如何创建一个新的<div>元素，设置其属性和文本内容，然后将其添加到页面中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作</title>
</head>
<body>
<!-- 一个用于插入新元素的容器 -->
<div id="container"></div>
<script>
// 1. 创建新元素
var newDiv = document.createElement('div');
// 2. 设置元素属性（可选）
newDiv.setAttribute('id', 'newElement');
newDiv.setAttribute('class', 'newClass');
// 3. 设置元素内容
newDiv.textContent = '这是新的元素内容';
// 4. 将元素添加到DOM中
var container = document.getElementById('container');
container.appendChild(newDiv);
</script>
</body>
</html>
在上述示例中，首先通过document.createElement('div')创建一个新的<div>元素，然后使用setAttribute设置其id和class属性，使用textContent设置其文本内容，最后通过appendChild将新元素添加到ID为container的容器中。
注意：在实际应用中，你可能会使用更多的DOM操作方法和更复杂的结构来创建和操作元素。此示例仅演示了基本的创建和添加步骤。
