使用JavaScript在html文档内添加新的元素节点

使用JavaScript可以在html文档内添加新的元素节点，具体的步骤如下：

1. 选中你想要添加元素的父节点
   const parent = document.querySelector('#parent-id');
   这里假设你已经通过HTML的id属性找到了父节点，如果你不清楚可以查看querySelector的文档。
2. 创建新节点
   const newNode = document.createElement('p');
   这里创建了一个p标签的新节点，你可以根据自己的需求创建不同类型的节点。
3. 修改新节点的属性和内容
   newNode.textContent = '这是一个新节点';
newNode.style.color = 'red';
   这里设置了新节点的文本内容和样式，你可以根据自己的需求设置不同的属性和内容。
4. 将新节点添加到父节点
   parent.appendChild(newNode);
   在完成了以上操作后，就可以将新节点添加到父节点中了。

下面是两个简单的示例说明：

示例一：创建一个列表项，并将其添加到无序列表中。
HTML代码：

<ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <<li>列表项3</li>
</ul>

JavaScript代码：

const parent = document.querySelector('#list');
const newNode = document.createElement('li');
newNode.textContent = '列表项4';
parent.appendChild(newNode);

执行后的结果为：

<ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

示例二：创建一个图片元素，并将其添加到容器中。
HTML代码：

<div id="container"></div>

JavaScript代码：

const parent = document.querySelector('#container');
const newNode = document.createElement('img');
newNode.src = 'https://picsum.photos/200/300';
parent.appendChild(newNode);

执行后的结果为：

<div id="container">
    <img src="https://picsum.photos/200/300">
</div>

这两个简单的例子演示了如何使用JavaScript在html文档内添加新的元素节点。