将 HTML 元素渲染到 DOM - Javascript

在网页开发中，将 HTML 元素渲染到 DOM（文档对象模型）是非常常见的操作。DOM是浏览器将网页解析成树形结构的模型，它可以实现对网页元素的动态增删改查等操作。

在Javascript中，可以使用document.createElement()方法创建一个新的元素，并使用appendChild()方法将其添加到DOM中。

var newElement = document.createElement('div');
var parentElement = document.getElementById('parent');
parentElement.appendChild(newElement);

上面的代码创建了一个新的<div>元素，并将其添加到了ID为parent的元素节点下面。这样，网页上就会多出一个空的<div>元素。

如果要给新创建的元素添加内容，我们可以使用newElement.innerHTML属性，它可以指定元素内包含的HTML内容。

newElement.innerHTML = '<p>Hello, World!</p>';

上面的代码将<p>标签作为字符串嵌入到了新创建的<div>元素中。此时，网页上就会显示出一段文字“Hello, World!”。

除了innerHTML属性，我们还可以通过document.createTextNode()方法创建文本节点，并使用appendChild()方法将其添加到元素中。

var newText = document.createTextNode('Hello, World!');
newElement.appendChild(newText);

上面的代码创建了一个文本节点，并将其添加到新创建的<div>元素中。此时，网页上同样会显示出一段文字“Hello, World!”。

以上就是使用Javascript将HTML元素渲染到DOM的基本操作。对于更加复杂的网页操作，我们还可以使用其他方法和库来简化代码和提高效率。