草稿js插入文本示例 - Javascript

Javascript可以通过DOM API操作文本内容，从而实现插入、修改、删除文本等功能。下面就介绍如何使用Javascript插入文本内容。

插入文本

我们可以通过DOM API的innerHTML或textContent属性来插入文本内容。

使用innerHTML

innerHTML属性可以读取或设置元素的HTML内容，我们可以通过它来插入文本。

// 获取div元素
const div = document.getElementById('container');
// 设置div元素的内容
div.innerHTML = 'Hello World';

上面的例子中，我们通过document.getElementById方法获取了一个id为container的div元素，然后通过设置innerHTML属性将div的内容设置为Hello World。

使用textContent

textContent属性与innerHTML属性类似，它可以读取或设置元素的文本内容。

// 获取p元素
const p = document.getElementsByTagName('p')[0];
// 设置p元素的文本内容
p.textContent = 'Hello World';

上面的例子中，我们通过document.getElementsByTagName方法获取了页面中第一个p元素，然后通过设置textContent属性将p元素的文本内容设置为Hello World。

插入标签

除了插入文本，我们还可以通过Javascript插入HTML标签。

// 获取div元素
const div = document.getElementById('container');
// 创建p元素
const p = document.createElement('p');
// 设置p元素的文本内容
p.textContent = 'Hello World';
// 在div元素中插入p元素
div.appendChild(p);

上面的例子中，我们通过document.createElement方法创建了一个p元素，并通过设置textContent属性将它的文本内容设置为Hello World，最后通过appendChild方法将p元素添加到div元素中。

结语

以上就是Javascript插入文本内容的示例，我们可以通过innerHTML和textContent属性插入文本，通过createElement方法创建元素并插入到文档中。这些工具可以帮助我们动态地修改HTML 页面元素，实现更加丰富和有趣的交互效果。