HTML DOM innerHTML和wr…

最新推荐文章于 2023-07-12 21:34:39 发布
原创 最新推荐文章于 2023-07-12 21:34:39 发布 · 567 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了innerHTML属性与document.write方法之间的不同之处。innerHTML允许更精确地控制页面上特定元素的内容更新，而document.write则直接写入页面的内容流，可能导致整个页面的重写。 
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。



innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。



DOM 的innerHTML是 DOM 元素对象的一个属性
而write是document对象的一个方法
mn_front
关注
JavaScript--DOM--HTML 的 innerHTML 属性
norang的博客
06-06 682
7.1.2 innerHTML 属性 现如今的浏览器几乎都支持属性innerHTML ，这个属性并不是W3C DOM标准的组成部分，但现已经包含到HTML5规范中。它始见于微软 公司的IE 4浏览器，并从那时起逐渐被其他的浏览器接受。 innerHTML 属性可以用来读、写某给定元素里的HTML内容。要了解它 如何工作，请把下面这段代码插入test.html 文档的 部分： 用DOM 的眼睛看testdiv 内的标记，是如图7-2所示的结构。 div 元素的id 是testdiv 。它包含一个元素节点（
轻松掌握Axios：JavaWeb中使用Axios的基本技巧
2301_77478553的博客
07-17 848
说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。异步网络请求。Ajax能够让页面无刷新的请求数据。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
使用ajax的商品列表分页
06-22
适合于新手小白参考，这个是通过ajax来写的js页面内容算是挺全的了，servlet使用的是ajax以及json字符串数据的传递不需要jsp的跳转，具有分页的功能，以及可以通过数据库增删改查，数据库文件在db文件夹里，在MySQL里面运行db_no.sql的语句就自动生成对应的数据库了
Vue+MUI使用Axios异步加载列表
qq_43005276的博客
11-18 466
//JS new Vue({ el: ‘#app’, //data() { // return { // info: null // } //}, data:{ sites: “” }, mounted() { //加载数据 this.LoadData(); }, methods: { LoadData() { axios .get(Url + “/UserInfo/RoleAuthority/GetListTree”) .then(response => (this.sit
仿淘宝商品列表js展示效果 jquery效果 ajax效果
01-12
仿淘宝商品展示jQuery特效，下拉展示 效果展示：http://www.whkge.com/jsview/js0112a/
仿京东商城（部分功能)前端+后台
07-22
仿京东商城部分功能，从注册登录，首页展示，搜索框，到页面的详情，加入购物车，将购物车存储到redis中。后台使用Spring+SpringMVC+MyBatis+Redis实现。对初学者是一个非常好的联系项目，不大也不小，而且先后台都有涉及。
用innerHTML　＆符号副值给文本框后会变成＆amp;的方法
10-30
InnerHTML副值给文本框时&符号变成&的解决方法 InnerHTML是HTML中的一种属性，用于设置或获取元素的内部HTML内容。当我们使用InnerHTML副值给文本框时，如果其中包含&符号，会被自动转义为&，这可能会导致...
通过 Dom 方法提高 innerHTML 性能
12-08
代码如下:function ... /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点 oldEl[removed] = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl[removed] = html; oldEl.pare
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
11-26
JavaScript 和 HTML DOM 是 web 开发中的两个核心概念，它们各自有着独特的功能，但又紧密相联，共同构建了动态交互的网页。 JavaScript 是一种轻量级的解释型编程语言，尤其在浏览器环境中广泛使用，主要负责实现...
DOM.rar_DOM_HTML dom_dom树解析
09-21
**DOM（Document Object Model）**是万维网联盟（W3C）定义的一个标准，它是一种与语言无关的接口，允许程序和脚本动态更新、添加、删除和改变元素及属性，以操作XML和HTML文档。DOM的核心在于将文档结构化为一个...
07#.Java Web中：初步了解Vue中的Axios
Hyper_Qi的博客
07-24 466
Axios 是什么? Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。 以上摘自: 链接：https://www.imooc.com/
JQuery实现商品列表
weixin_30852451的博客
06-01 923
用户单击商品列表下的“显示全部品牌”按钮来显示全部的品牌全，同时将推荐的品牌名字高亮显示，按钮里的文字也变成“精简商品品牌”；再次点击“精简商品按钮”，又回到最初的页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>...
web开发之Ajax
WZJ278的博客
04-30 347
目录 案例1：使用Ajax实现无刷新登录 案例2：使用Ajax实现实时检查注册时用户名是否重复 案例3：使用Ajax实现搜索自动提示 今天结合几个案例给大家分享一下Ajax技术的用处先了解一下什么是Ajax Ajax：只刷新局部页面的技术 Ajax的全称是Asynchronouns JavaScript and XML（异步的 JavaScript 和 XML ） Ajax不是新的编程语言，而是一种使用现有标准的新方法 Ajax是一种在无需重新加载整个网页的情况下，能够与服务器交换数据.
【归纳总结3】JavaWeb之Ajax、axios、json和fastjson
weixin_45905080的博客
08-01 278
Javaweb之Ajax、axios、json和fastjson，实现原生ajax的封装简写，以及java与javascript数据的交换
【Java Web】JSON、AJIAX、AXIOS
李鲤驴的博客
07-13 401
JSON 什么是 JSON   JSON = JavaScript Object Notation (JavaScript 对象表示法) ，是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于 JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999 (js规范) 的一个子集。 JSON 采用完全独立于编程语言的文本格式来存储和表示数据，但是也使用了类似于 C 语言家族的习惯（包
axios模块封装和分类列表实现
weixin_30947043的博客
05-30 93
这个作用 主要还是为了让代码更加的，清晰。 不要全部都放到 created(){} 这个方法下面。把这些代码全部抽离出去。 这里就只是去调用方法。1. src 目录下，新建文件夹--- restful 文件夹下面新建js文件： api.js import Axios from 'axios' // 导入axios 下载npm install axios -S Axio...
掌握Javaweb 开发 实现前后端交互
likeJava76的博客
07-11 834
使用WebServlet注解，将Java类标记为处理HTTP请求的servlet。并且使用v-for循坏 渲染页面。请求后端数据 展示到浏览器控制台。
innerHTML和outerHTML的异同点
fsLees的博客
07-12 3328
innerHTML和outerHTML的异同点
js 去除 
最新发布
07-11
在JavaScript中，去除HTML字符串中的 ` ` 字符可以通过正则表达式来实现。` ` 是 HTML 中表示不可断行空格的转义字符，常出现在从富文本编辑器（如 UEditor）获取的内容中。以下是一些常见的处理方式： ### 去除 ` ` 的方法 #### 方法一：使用正则表达式替换 ` ` 可以直接使用 `String.prototype.replace()` 方法配合正则表达式来移除所有 ` `。 ```javascript let str = "这是一个 测试字符串  示例"; str = str.replace(/ /g, ""); console.log(str); // 输出：这是一个测试字符串示例 ``` 此方法适用于直接处理字符串内容[^3]。 #### 方法二：结合去除 HTML 标签的操作一并处理 ` ` 如果字符串中同时包含 HTML 标签和 ` `，可以先移除标签，再替换 ` `。 ```javascript function cleanHtmlAndNbsp(str) { // 移除 HTML 标签 str = str.replace(/<\/?[^>]*>/g, ''); // 移除   str = str.replace(/ /g, ''); return str; } let htmlStr = "<p>这是一段 带格式的  内容</p>"; let cleanedStr = cleanHtmlAndNbsp(htmlStr); console.log(cleanedStr); // 输出：这是一段带格式的内容 ``` 该函数首先通过正则表达式 `/</?[^>]*>/g` 删除所有 HTML 标签，然后继续用 `/ /g` 删除所有的 ` ` 实体[^2]。 #### 方法三：处理复杂 HTML 内容时可考虑 DOM 解析 对于更复杂的 HTML 字符串处理，可以借助浏览器内置的 DOM 解析能力提取纯文本内容，从而自动忽略 ` ` 和其他 HTML 实体。 ```javascript function extractTextFromHtml(html) { const container = document.createElement('div'); container.innerHTML = html; return container.textContent || container.innerText || ''; } let complexHtml = "<div>开始  <span>中间内容</span> 结束</div>"; let textContent = extractTextFromHtml(complexHtml); console.log(textContent); // 输出：开始 中间内容 结束 ``` 这种方法不会显式删除 ` `，但会将其转换为普通空格，适合用于提取 HTML 片段的可读性文本内容[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值