js常见操作

淩亂°似流年 2022-08-06 17:25 150阅读 0赞

1、如何改变 HTML 元素的内容 (innerHTML)

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
    
    <button id="myBtn">点击这里</button>
    
    <script>
    document.getElementById("myBtn").οnclick=function(){displayDate()};
    function displayDate()
    {
    document.getElementById("demo").innerHTML=Date();
    }
    </script>
    
    <p id="demo"></p>
    
    </body>
    </html>

2、如何改变 HTML 元素的样式 (CSS)

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction(x)
    {
    x.style.background="yellow";
    }
    </script>
    </head>
    <body>
    
    请输入英文字符：<input type="text" οnfοcus="myFunction(this)">
    
    <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
    
    </body>
    </html>

3、如何添加或删除 HTML 元素

添加：
    <!DOCTYPE html>
    <html>
    <body>
    
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是新段落11111。");
    para.appendChild(node);
    
    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>
    
    </body>
    </html>
    
    删除：
    <!DOCTYPE html>
    <html>
    <body>
    
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    
    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    </script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，150人围观）

还没有评论，来说两句吧...

相关阅读

相关 ActiveMQ常见操作

ActiveMQ的安装 1、下载安装包，建立activemq用户，安装 cd /opt/ wget http://apache.dataguru.cn

以你之姓@/ 2023年01月02日 06:27/ 0 赞/ 306 阅读

相关 liquibase常见操作

> 一直以来，部门内部对于数据库结构的变更跟踪都处于一种切肤之痛，却又无暇顾及的状态。 0. 目录 1. 概述 2. 使用

Myth丶恋晨/ 2022年12月03日 12:56/ 0 赞/ 268 阅读

相关 js的常见操作，持续更新中...

写在前面如果下面没有您需要的js和对象的操作，需求下面留言，备注好您的源数据格式和希望转的格式，我会更新,感谢浏览！有错误及时指正！ ----------------

电玩女神/ 2022年12月01日 11:43/ 0 赞/ 250 阅读

相关 js中Attribute属性常见操作函数整理

js中Attribute属性常见操作函数整理 Attribute常见函数简介 attributes的使用方法：（IE和FF通用）

ゞ浴缸里的玫瑰/ 2022年11月17日 13:42/ 0 赞/ 414 阅读

相关 mongoTemplate 常见操作

插入数据将参数转换成一个对象，直接调用insert方法即可：举例： 1. @Document(collection="student") 2. publ

本是古典何须时尚/ 2022年09月13日 05:23/ 0 赞/ 493 阅读

相关 JS对象中常见的操作方法

本文内容： 1. 介绍对象的两种类型 2. 创建对象并添加属性 3. 访问对象属性 4. 删除对象属性 5. 作为函数参数 6. 枚举对象的属性 7. 数据类型

雨点打透心脏的1/2处/ 2022年09月08日 00:29/ 0 赞/ 206 阅读

相关 js常见操作

1、如何改变 HTML 元素的内容 (innerHTML) <!DOCTYPE html> <html> <head> </head>

淩亂°似流年/ 2022年08月06日 17:25/ 0 赞/ 151 阅读

相关 redis常见操作

一、Redis连接与认证 //连接参数：ip、端口、连接超时时间，连接成功返回true，否则返回false $ret = $redis->connect(‘127.0.

悠悠/ 2022年03月31日 02:08/ 0 赞/ 253 阅读

相关 JS中常见原生DOM操作API【总结整理)

转载自：https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口，中文叫节

爱被打了一巴掌/ 2021年09月19日 15:48/ 0 赞/ 427 阅读

相关 js数组常见操作方法介绍

js数组常见操作方法介绍数组及操作方法数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。定义数组的方法

红太狼/ 2020年06月06日 18:53/ 0 赞/ 842 阅读