当前位置: 首页 > news >正文

【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落

【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落

目的:采用JAVASCRIPT在一个HTML网页中增加一个段落。

下面是原来的HTML代码部分:

<!DOCTYPE html>
<html lang="zh-Hans"><head><meta charset="UTF-8"><title>测基因,阻断遗传就在“佳学基因”干</title><meta name="viewpoint" content="width=device-width; scale=1"><script src="js/paddtion_in_body.js"></script></head><body id="myBody"><h1 id="myh1">测基因,阻断遗传就在“佳学基因”干</h1><p id="existingp">在第一段里,介绍了佳学基因如何采用基因解码技术更快更准地对已诊断的罕见病、疑似疾病病例及未确诊病例,找到疾病基因。</p></body></html>

下面是JAVASCRIPT代码部分

document.addEventListener('DOMContentLoaded', function padditioninbody() {const bodytoadd = document.getElementById("myBody");const paratoadd = document.createElement("p");paratoadd.textContent = "在第二段里拟介绍肌营养不良、脱发、肿瘤等不同遗传病的发病原因查找的基因检测项目价格、费用、及如何进行检测的流程。";bodytoadd.appendChild(paratoadd);
}); 

代码解释

1、HTML采用了简单的结构,包含文档类型定义,HEAD内容。 页面的题目可以是根据需求来自定义,如“华大基因检测,佳学基因检测,罕见病基因,人工智能学习”等。
2、使用了事件监听语句: addEventListener, 和监听事件: DOMContentLoaded. 使得修改过程在HTML文档的全部内容加载后进行,否则,JAVASCRIPT不能发现需要修改的对象。
3、采用getElementbyId指定需要修改的上一层结构,这里是部分。 并将需修改的部分命名为"bodytoadd".
4、新增加一个网页成分

, 并将其命名为paratoadd.
5、为新加的段落内容制定内容: “在第二段里拟介绍肌营养不良、脱发、肿瘤等不同遗传病的发病原因查找的基因检测项目价格、费用、及如何进行检测的流程。”
6、使用bodytoadd指明添加的位置, 使用appendChild行驶添加动作,采用paratoadd,指加添加的内容。

运行测试

可以使用visual code拷贝上述代码进行测试,并按照自己的需要进行修改使用。

相关文章:

【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落

【基因检测人工智能】如何使用JAVASCRIPT在HTML文档内部增加一个段落 目的&#xff1a;采用JAVASCRIPT在一个HTML网页中增加一个段落。 下面是原来的HTML代码部分&#xff1a; <!DOCTYPE html> <html lang"zh-Hans"><head><meta charset&quo…...

unittest单元测试

当你在编写测试用例时&#xff0c;可以使用Python内置的unittest模块来进行单元测试。下面是一个逐步指南&#xff0c;帮助你理解如何编写和运行基本的单元测试。 导入必要的模块&#xff1a; 首先&#xff0c;你需要导入unittest模块和需要测试的模块&#xff08;例如&#xf…...

每天一道leetcode:72. 编辑距离(动态规划困难)

今日份题目&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 示例1 输入&#xff1a;word1 "horse", word…...

详细介绍如何使用 OpenCV 对图像进行锐化

将了解锐化图像的过程,我们将使用内核来突出显示每个特定像素并增强其发出的颜色。它与模糊过程非常相似,只不过现在我们不是创建一个内核来平均每个像素强度,而是创建一个内核,该内核将使像素强度更高,因此对人眼来说更加突出。 了解流程的后端。 很高兴知道内核用于模糊…...

Java代理模式——静态代理与动态代理

代理模式 代理模式允许你为其他对象提供一个代理&#xff0c;以控制对这个对象的访问。代理模式在不改变实际对象的情况下&#xff0c;可以在访问对象时添加额外的功能。 可以理解为代理模式为被代理对象创造了一个替身&#xff0c;调用者可以通过这个替身去实现这个被代理对…...

Vue day02 Computed和Watch

1.事件绑定 可以用 v-on 指令监听DOM 事件&#xff0c;并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。 <button v-on:click"handler">good</button> methods: { handler: function (event) { if (event) { alert(event.t…...

【Java】一只小菜坤的编程题之旅【3】

文章目录 1丶判定是否互为字符重排2、杨辉三角3丶某公司的1个面试题&#xff08;字符串包含问题&#xff09; 1丶判定是否互为字符重排 这个题我们用一个非常简单的思想就能实现&#xff0c;我们先将字符串转换为字符数组&#xff0c;然后对字符数组进行排序&#xff0c;然后再…...

全面掌握 Jaeger 分布式调用链路跟踪理论和实战,Go 为所有使用 go-resty 库发起 HTTP 请求集成链路跟踪 jaeger(附源码)

全面掌握 Jaeger 分布式调用链路跟踪理论和实战,Go 为所有使用 go-resty 库发起 HTTP 请求集成链路跟踪 jaeger(附源码)。 介绍一个开源的分布式跟踪系统 Jaeger,首先从理论基础知识开始学习,将学习如何在 HTTP 请求中集成链路跟踪,以及如何在 GORM 框架实现,最后学习 …...

vue键盘和鼠标事件

1、键盘事件 **按Enter键** keyup.enter**按PageDown键** keyup.page-down **按Tab键** keyup.tab **按Delete键** keyup.delete **按ESC键** keyup.esc**按Space键** keyup.space **按↑&#xff08;Up&#xff09;键** keyup.up**按↓&#xff08;Down&#xff09;键** keyup…...

Chrome 手动代理设置 HTTP/Socks5

1、安装代理插件&#xff1a;SwitchyOmega 在线安装 从 Chrome 应用商店 安装&#xff0c;如果您无法从该链接安装&#xff0c;请使用下面的离线安装。 离线安装 ①、去 Github 下载 最新版安装包 &#xff0c;或者直接 本地下载 文件进行安装。 ②、下载安装文件后&#xf…...

SpringBoot第35讲:SpringBoot集成连接池 - 默认连接池HikariCP

SpringBoot第35讲&#xff1a;SpringBoot集成连接池 - 默认连接池HikariCP 本文是SpringBoot第35讲&#xff0c;主要介绍数据库连接池&#xff0c;以及SpringBoot集成默认的HikariCP的实践。 文章目录 SpringBoot第35讲&#xff1a;SpringBoot集成连接池 - 默认连接池HikariCP1…...

选择最适合自己的笔记本

选择最适合自己的笔记本电脑 一、了解笔记本品牌一线品牌准一线品牌二线品牌三线品牌 二、笔记本入手渠道笔记本入手渠道 三、根据需求选择机型使用需求1.日常使用2.商务办公、财务3.轻度剪辑、ps4.代码5.创意设计6.游戏 四、笔记本电脑配置如何选1.cpu2.显卡&#xff08;GPU&a…...

前端安全:探秘安全 HTTP 头的设置

在当今数字化时代&#xff0c;前端安全至关重要。除了应对常见的攻击方式外&#xff0c;通过设置安全 HTTP 头&#xff0c;我们可以加强网站的安全性&#xff0c;减少潜在的威胁。本文将为您详细解释什么是安全 HTTP 头&#xff0c;以及如何通过设置它们来保护您的前端应用。 1…...

python爬虫——爬虫伪装和反“反爬”

前言 爬虫伪装和反“反爬”是在爬虫领域中非常重要的话题。伪装可以让你的爬虫看起来更像普通的浏览器或者应用程序&#xff0c;从而减少被服务器封禁的风险&#xff1b;反“反爬”则是应对服务器加强的反爬虫机制。下面将详细介绍一些常见的伪装和反反爬技巧&#xff0c;并提…...

vue3 使用 element-china-area-data 实现地区选择器

官方地址&#xff1a;https://www.npmjs.com/package/element-china-area-data?activeTabreadme 在线示例&#xff1a;https://plortinus.github.io/element-china-area-data/index.html 实际使用 <el-col :span"12"><el-form-item label"所处城市&…...

STM32自带的DSP库的滤波初体验(一)

最近在弄STM32自带的DSP库里的滤波&#xff0c;记录一下&#xff1a; arm_fir_instance_q15 instance_q15_S; #define NUM_TAPS 16 //滤波系数的个数 #define BLOCK_SIZE 32 q15_t firStateF32[BLOCK_SIZE NUM_TAPS]; q15_t Fir_Coeff[NUM_TAPS] {-79, -136, 312, 6…...

go kratos protobuf 接收动态JSON数据

前言 google.protobuf.Struct 是 Google Protocol Buffers 中的一种特殊类型&#xff0c;用于表示动态的键值对数据。它可以存储任意类型的数据&#xff0c;并提供了方便的方法来访问和操作这些数据。 Struct 类型通常用于在不事先知道数据结构的情况下传递和处理配置、参数或其…...

Python学习笔记第五十四天(Pandas DataFrame)

Python学习笔记第五十四天 Pandas 数据结构 - DataFrame使用列表创建使用 ndarrays 创建使用字典创建返回多行数 后记 Pandas 数据结构 - DataFrame DataFrame 是一个表格型的数据结构&#xff0c;它含有一组有序的列&#xff0c;每列可以是不同的值类型&#xff08;数值、字符…...

Docker镜像查看下载删除镜像文件的相关命令

1.镜像相关命令 本地查看有哪些镜像文件&#xff1a; docker images镜像的名称就是我们常见的一些软件&#xff0c;镜像相当于把软件和软件所需要的运行环境打包到一个镜像文件里面&#xff0c;将来在通过这个镜像文件创建出对应的容器&#xff0c;容器有了以后这些软件自动的…...

1. VisionOS平台介绍

介绍 VisionOS 可实现与现实世界无缝集成并与其他虚拟内容共存的 3D 多任务体验。这为个人生产力、生活方式和娱乐应用打开了一个充满新可能性的世界&#xff0c;并为开发人员打开了一个全新的市场。然而&#xff0c;它也带来了围绕多任务处理和与身体互动的新挑战。Unity Poly…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...