JavaScript如何修改div文本

使用innerHTML属性

JavaScript提供了innerHTML属性，它可以用于获取或设置HTML元素的内容。通过设置div元素的innerHTML属性，我们可以修改div的文本内容。

    // 获取div元素
    var divElement = document.getElementById('myDiv');

    // 修改文本内容
    divElement.innerHTML = '新的文本内容';
  

上述代码中，我们首先通过document.getElementById('myDiv')获取到具有id为"myDiv"的div元素，然后通过设置其innerHTML属性将文本内容修改为"新的文本内容"。

使用textContent或innerText属性

除了innerHTML属性，JavaScript还提供了textContent和innerText属性，它们也可以用于修改div元素的文本内容。

    // 获取div元素
    var divElement = document.getElementById('myDiv');

    // 修改文本内容
    divElement.textContent = '新的文本内容';
    // 或者
    divElement.innerText = '新的文本内容';
  

上述代码中，我们通过设置div元素的textContent或innerText属性将文本内容修改为"新的文本内容"。其中，textContent可以保留文本中的空格和换行符，而innerText会忽略它们。

使用appendChild方法

如果我们希望在div元素中添加新的文本节点，而不仅仅是替换原有的文本内容，我们可以使用appendChild方法。

    // 获取div元素
    var divElement = document.getElementById('myDiv');

    // 创建新的文本节点
    var newText = document.createTextNode('新的文本内容');

    // 添加新的文本节点
    divElement.appendChild(newText);
  

上述代码中，我们首先通过document.createTextNode('新的文本内容')创建一个新的文本节点，然后通过调用divElement的appendChild方法将新节点添加到div元素中。

总结

通过使用innerHTML属性、textContent/innerText属性或appendChild方法，我们可以在JavaScript中轻松地修改div元素的文本内容。根据实际需求，选择适合的方法进行操作。