javascript修改div内容-前端问答-PHP中文网

javascript修改div内容

PHPz

发布： 2023-05-16 10:03:10

原创

5004人浏览过

前端开发中，经常需要使用javascript来修改页面中的内容，特别是对于div元素中的内容进行修改。本文将介绍如何使用javascript来修改div元素中的内容。

一、通过innerHTML属性修改

innerHTML属性返回或设置HTML内容。通过修改innerHTML属性，我们可以更改div元素中的内容。例如：

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "修改后的内容";
}
</script>

登录后复制

点击按钮后，div中的内容将被修改为“修改后的内容”。

需要注意的是，innerHTML属性可以设置任意的HTML标签和属性。例如：

立即学习“Java免费学习笔记（深入）”；

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").innerHTML = "<p style='color: red;'>修改后的内容</p>";
}
</script>

登录后复制

这个例子将div中的内容修改为了一个红色的段落标签。

二、通过textContent属性修改

如果我们只想修改div元素中的文本内容，可以使用textContent属性。textContent属性返回或设置当前元素中的文本内容，其中HTML标签和属性会被忽略。例如：

图改改

在线修改图片文字

455

查看详情

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    document.getElementById("myDiv").textContent = "修改后的文本内容";
}
</script>

登录后复制

点击按钮后，div中的内容将被修改为“修改后的文本内容”。

三、通过createElement和appendChild方法修改

createElement和appendChild是两个常用的DOM方法，用于创建和插入新的HTML元素。我们可以通过这两个方法来修改div元素中的内容。

例如，我们可以先创建一个新的p标签，然后将其添加到div元素中。代码如下：

<div id="myDiv">原始内容</div>

<button onclick="change()">点击修改内容</button>

<script>
function change(){
    var newP = document.createElement("p");
    var newText = document.createTextNode("修改后的内容");
    newP.appendChild(newText);
    document.getElementById("myDiv").appendChild(newP);
}
</script>

登录后复制

点击按钮后，div将有一个新的p标签，其内容为“修改后的内容”。

需要注意的是，通过createElement和appendChild方法添加的新元素是在原有内容的基础上新添加的。如果需要替换原有内容，可以采用innerHTML或textContent属性。

综上所述，使用JavaScript修改div元素内容非常方便，我们可以根据需要选择不同的方法进行操作。更多关于JavaScript的内容，请继续关注我的博客！

以上就是javascript修改div内容的详细内容，更多请关注php中文网其它相关文章！