关键词

通过JS动态创建一个html DOM元素并显示

创建一个HTML DOM元素是非常方便的,Javascript提供了多种方法来实现这个目标。

一、使用document.createElement()

可以使用document.createElement()方法来创建任何HTML元素。例如,要创建一个<div>元素,您可以使用以下代码:

// 创建一个 div 元素
const divElement = document.createElement("div");

// 将新创建的元素添加到页面某个位置
document.getElementById("some-div").appendChild(divElement);

上面的代码会创建一个新的div元素,并把它添加到ID为“some-div”的元素中。您可以指定任何元素的任何父级元素作为新元素的父级。

二、使用innerHTML属性

您还可以使用innerHtml属性来创建HTML元素。例如,为了创建一个带有单行文本的新段落,您可以使用以下代码:

// 在页面中创建一个新的p元素
const pElement = document.createElement('p');

// 添加文本到新的p元素
pElement.innerHTML = '这是一个新段落的文本';

// 将新的p元素添加到body标签中
document.body.appendChild(pElement);

该代码会创建一个新的<p>元素,并将其添加到<body>元素中,并在其中包含文本。

在这两个示例中,我们使用createElement()innerHTML方法创建了HTML元素并添加到DOM中。

您可以在您的代码中使用这些方法来创建任意一种HTML元素,并将其添加到页面当中,从而动态地生成页面内容。

本文链接:http://task.lmcjl.com/news/9903.html

展开阅读全文