首页编写一个html文档，用JavaScript创建两个新元素节点p，并把相应文本赋给p显示在网页中。再创建两个按钮，第一个按钮的功能实现把背景变色，把文本变色。第二个按钮实现把第一串文本的内容改变。

编写一个html文档，用JavaScript创建两个新元素节点p，并把相应文本赋给p显示在网页中。再创建两个按钮，第一个按钮的功能实现把背景变色，把文本变色。第二个按钮实现把第一串文本的内容改变。

时间: 2024-03-03 13:50:16 浏览: 82

好的，以下是代码实现： ```html <!DOCTYPE html> <html> <head> <title>JavaScript操作DOM</title> <style> body { background-color: #fff; color: #000; } </style> </head> <body> <h1>JavaScript操作DOM</h1> <p id="text1"></p> <p id="text2"></p> <button onclick="changeColor()">改变颜色</button> <button onclick="changeText()">改变文本</button> <script> var text1 = document.getElementById("text1"); text1.innerHTML = "这是第一串文本"; var text2 = document.getElementById("text2"); text2.innerHTML = "这是第二串文本"; function changeColor() { document.body.style.backgroundColor = "#000"; document.body.style.color = "#fff"; } function changeText() { text1.innerHTML = "这是修改后的文本"; } </script> </body> </html> ``` 解释一下代码：首先在`<body>`标签中创建两个空的`<p>`标签，并分别赋予`id`属性。接着创建两个按钮，分别绑定`onclick`事件，调用`changeColor()`和`changeText()`函数。在JavaScript部分，首先通过`document.getElementById()`方法获取到两个`<p>`元素节点，并分别赋值给`text1`和`text2`变量。然后分别通过`innerHTML`属性为两个`<p>`元素节点设置文本内容。 `changeColor()`函数实现改变背景颜色和文本颜色的功能，通过`document.body.style`设置`backgroundColor`和`color`属性即可。 `changeText()`函数实现修改第一串文本的内容，通过`text1.innerHTML`属性修改即可。注意事项：以上代码只是示例代码，实际应用中需要注意代码的兼容性和安全性。

阅读全文