js的innerHTML进行页面修改

已于 2022-03-12 13:25:35 修改
阅读量1.7k 收藏
点赞数
文章标签： javascript 前端 html
于 2022-03-10 11:19:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47959958/article/details/123396726
版权

对于野路子出家的前端，今天算是开了眼。原来还有这种玩法——
首先是html的body部分

<body>
<script  type="text/javascript" src="header.js "></script>
<div>
    这里是页面主体内容
	<script  type="text/javascript" src="${base}js/header.js "></script>
        
</div>
</body>

楼猪要做的是添加一个div，div中显示一个图片，但是前提是在js中进行修改
header函数的变更

function header() {
    var header = document.createElement("div")
    header.style.overflow = 'hidden'

    var JSHeader = document.getElementById("JSHeader")
    if(!JSHeader){
        document.write("<div id='JSHeader'></div>")
        JSHeader = document.getElementById("JSHeader")
        if(!JSHeader){
            var headerDiv = document.createElement("div");
            headerDiv.id = "JSHeader";
        }
    }
 }
  var imagediv = document.createElement("div")
    imagediv.id= 'imagediv'
    imagediv.innerHTML = 
        "<div>"
        +"<img src=\'./header.png\' />"
        +"</div>"

if(!JSHeader) {
        setTimeout(function() {
            var bodyDom = document.getElementsByTagName('body')[0];
            var first = bodyDom.firstChild;
            bodyDom.insertBefore(headerDiv, first);
            JSHeader = document.getElementById("JSHeader")
            JSHeader.style.overflow = 'hidden'
            JSHeader.appendChild(header)
            // JSHeader.appendChild(bread)
            JSHeader.appendChild(imagediv)
            dateShows = document.getElementById("dateShow")
            dateShows.innerHTML = showTips
        }, 200);
    }else{
        JSHeader.style.overflow = 'hidden'
        JSHeader.appendChild(header)
        JSHeader.appendChild(imagediv)
        // JSHeader.appendChild(bread)
        dateShows = document.getElementById("dateShow")
        dateShows.innerHTML = showTips
    }
dream2moon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中的innerHTML使用
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
JavaScript之innerHTML和outerHTML，innerText和outerText
Karka_的博客
09-15 4475
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
JavaScript操作DOM实现页面元素更改
最新发布
h1008685的博客
04-27 896
JavaScript操作DOM实。现页面元素更改,dom讲解，通过dom-api操作页面元素。源码详解，实例解析，代码结构及作用，页面样式
JS——JavaScript入门【JavaScript中的innerHTML 属性】
qq_43201350的博客
07-24 226
JS——JavaScript入门【JavaScript中的innerHTML 属性】
javascript 改变 HTML 元素 element.innerHTML、.attribute、.setAttribute(attribute, value)、.style.property
欢迎光临雨落星辰的博客
08-12 1454
改变元素的 inner HTML element.innerHTML = new html content 改变元素的 inner HTML eg: div.innerHTML = '这是一条测试文本' 可以将<div></div>修改为<div>这是一条测试文本</div> 还可以通过这种方法将标签放入div标签之中 div.innerHTML = '<a>这是一个测试文本</a>' <!DOCTYPE html> &l.
Javascript createElement和innerHTML增加页面元素的性能对比
10-29
在JavaScript中，向页面动态添加元素时，通常有两种常见方法：`createElement`和`innerHTML`。这两个方法各有优缺点，性能表现也有所差异。本文将详细分析这两种方法，并通过示例代码进行对比。 1. `createElement`...
Javascript中innerHTML用法实例分析
12-01
这展示了innerHTML属性如何方便地动态修改页面内容。 在实际开发中，innerHTML不仅可以用于替换整个元素的内容，还可以用于获取元素现有的HTML内容。例如，如果你想要获取`<div id="container">`的HTML源码，你可以...
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
01-19
本文实例讲述了js使用文档就绪函数动态改变页面内容。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> ...
JavaScript获取页面元素的常用方法详解
10-16
在JavaScript中，获取页面元素是Web开发中至关重要的技能，因为这允许我们操作和改变页面上的内容。本文将详细介绍四种常用的JavaScript方法来获取页面元素，包括通过标签名、ID、类名以及CSS选择器。 1. **通过...
JS 改变元素节点中的内容 innerHTML innerTex
HandsomeDanielWu的博客
07-27 235
JS 改变元素节点中的内容 innerHTML innerTex
js innerHTML 改变div内容的方法
10-27
永远不知道你可以改变的内容，一个HTML元素？也许你要取代的文字段落中，以反映什么访客选定刚刚从下拉框中。通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢。
廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式
weixin_30628801的博客
10-31 202
拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); //...
动态修改元素内容 innerText、innerHTML、outerText、outerHTML
韩世雷 程序员专栏
07-18 6815
中国风 function IT(){ f1.innerText="innerText"; } function IH(){ f1.innerHTML="innerHTML"; } function OT(){ f1.outerText="outerText"; } function OH(){ d1.outerHTML="outerHTML"; }
innerText和innerHTML改变元素内容
qq_44690849的博客
04-18 1728
1、innerText: 以点击按钮，div里的文字显示当前时间为例： <button>显示当前系统时间</button> <div>某个时间</div> js部分代码： // 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div') // 绑定事件 btn.onclick = function () {
修改元素html内容的函数是,通过ID获取元素 innerHTML 属性 改变 HTML 样式
weixin_39932838的博客
06-03 1071
[javascript]代码库1 通过ID获取元素document.getElementById(“id”)2 innerHTML 属性var mychar= document.getElementById("con"); //获取ID为con的元素document.write("原标题:"+mychar.innerHTML+""); //输出原标签内容mychar.innerHTML="He...
JS DOM innerHTML和innerText
大河之犬的博客
10-06 1004
属性很方便地获取和设置一个元素的“内部元素”，也可以使用。在JavaScript中，我们可以使用。属性获取和设置一个元素的“内部文本”获取的是元素内部所有的内容，而。获取的仅仅是文本内容。
js innerhtml innertext 区别
04-29
JavaScript 中经常使用 innerHTML 和 innerText 来操作页面元素的内容，这两个方法都可以修改元素的文本内容。它们的主要区别如下： innerHTML 属性用于获取或设置元素的 HTML 内容，包括标签和元素。使用 innerHTML 可以修改或添加元素内的 HTML 码。例如： ``` document.getElementById("myElement").innerHTML = "<p>Hello World!</p>"; ``` 这行代码将替换 id 为 myElement 的元素的 HTML 内容为一个段落标签包含的文本“Hello World！”。 而 innerText 属性只获取或设置元素的纯文本内容，这意味着标签和元素将被忽略。例如： ``` document.getElementById("myElement").innerText = "Hello World!"; ``` 这行代码将替换 id 为 myElement 的元素的文本内容为“Hello World！”，不包含任何标签。 因此，innerHTML 更常用于操作 HTML 元素的内容，而 innerText 更常用于操作纯文本元素的内容。需要注意的是，innerHTML 的使用可能会增加安全风险，因为它可以插入恶意代码到网页中。因此，在使用 innerHTML 时需要注意输入的内容来源，避免被攻击。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值