JavaScript modifies div content

In front-end development, it is often necessary to use JavaScript to modify the content on the page, especially to modify the content in the div element. This article will introduce how to use JavaScript to modify the content in div elements.

1. Modify the innerHTML attribute through the

innerHTML attribute to return or set HTML content. By modifying the innerHTML attribute, we can change the content in the div element. For example:

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

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

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

After clicking the button, the content in the div will be modified to "modified content".

It should be noted that the innerHTML attribute can set any HTML tags and attributes. For example:

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

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

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

This example changes the content in the div to a red paragraph tag.

2. Modify through the textContent attribute

If we only want to modify the text content in the div element, we can use the textContent attribute. The textContent property returns or sets the text content in the current element, where HTML tags and attributes are ignored. For example:

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

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

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

After clicking the button, the content in the div will be modified to "modified text content".

3. Modify through the createElement and appendChild methods

createElement and appendChild are two commonly used DOM methods, used to create and insert new HTML elements. We can modify the content in the div element through these two methods.

For example, we can first create a new p tag and then add it to the div element. The code is as follows:

<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>

After clicking the button, the div will have a new p tag with the content "Modified Content".

It should be noted that the new elements added through the createElement and appendChild methods are newly added based on the original content. If you need to replace the original content, you can use the innerHTML or textContent attribute.

To sum up, it is very convenient to use JavaScript to modify the content of div elements. We can choose different methods to operate according to our needs. For more content about JavaScript, please continue to follow my blog!

The above is the detailed content of JavaScript modifies div content. For more information, please follow other related articles on the PHP Chinese website!