`
starbhhc
  • 浏览: 633469 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

用JS增加页面标签和属性

 
阅读更多
<html>
   <head>
       <title>innerHtml</title>
       <meta http-equiv="content-type" content="text/html; charset=gb2312" />
   </head>
   <script type="text/javascript" src="dojo-release-1.1.1/dojo/dojo.js"></script>
   <script type="text/javascript" language="javascript">
       function change_content(){
           var str="chang content!<br>";
           var temp=document.getElementById("old_div");
           temp.innerHTML=str;

           var new_span=document.createElement("span");
           new_span.setAttribute("id","new_span");
           new_span.setAttribute("class","color1");
           //new_span.id="new_span";
           var new_text=document.createTextNode("This is a new node!");
           new_span.appendChild(new_text);
           temp.appendChild(new_span);      
                      
           temp = document.getElementById("add_content");
           temp.setAttribute("value","改变颜色");
           temp.setAttribute("onclick","change_color()");
       }
      
       function change_color(){
           var temp = document.getElementById("new_span");
           temp.setAttribute("class","color2");
       }
   </script>
   <style>
       .color1{
           background-color:yellow;
       }
       .color2{
           background-color:red;
       }
   </style>

   <body>
       <div id="old_div">No content!</div>
       <input type="button" id="add_content" onclick="change_content()" value="内容"/><br/>
       <input type="button" value="换色" onclick="change_color();"/>
   </body>
</html>
分享到:
评论

相关推荐

    Nuxt页面自定义meta标签和asyncData异步请求

    全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是:hid属性是页面的唯一标识 若想要在此配置并覆盖全局的meta 那么hid属性必须为description 因为默认的meta...

    a标签调用js的方法总结

    &lt;a&gt; 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。 这里的href=”[removed];” rel=”external nofollow” rel=”external ...

    【JavaScript源代码】为网站代码块pre标签增加一个复制代码按钮代码.docx

     实现思路: 1、在页面加载完成之后,使用js给每个pre标签增加一个按钮“复制代码” 2、给按钮增加点击事件,点击事件的功能就是复制代码块的内容 实现代码: css部分,btn-pre-copy是pre标签中使用js增加的...

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签。... script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:  1.[removed][removed]  没有defer或async属性,

    HTML常用标签及属性.docx

    HTML常用标签及属性:“HTML的常用标签表单标签作用:可以提交不同的数据到服务器标签:&lt;form&gt;&lt;/form&gt;:表示表单的范围【父标签】 主要作用:用于采集用户信息 子标签的分类: 表单标签:包含数据提交服务器地址、...

    将页面中的object标签替换为video的JS

    因移动端使用object无法播放视频,所以我们需要将object替换为video标签

    jQuery的打开多个标签页面代码.zip

    jQuery Bootstrap打开多个标签页面代码是一款使用标签页打开页面模式,可以自由切换关闭。 引入单个插件还是一次性引入所有插件 每个插件都可以单独的引入到页面中(注意插件间的依赖关系),...

    JS组件系列之使用HTML标签的data属性初始化JS组件

    最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里面,可是从后台取数据就需要js...

    Javascript获取标签ID改变style属性的代码

    下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了

    jQuery打开多个标签页面代码.zip

    jQuery打开多个标签页面代码是一款使用标签页打开页面模式,可以自由切换关闭。 引入单个插件还是一次性引入所有插件 每个插件都可以单独的引入到页面中(注意插件间的依赖关系),或者一次性引入。bootstrap.js ...

    html登录注册页面,登录和注册页面的实现HTML,CSS,JS

    以下是使用HTML、CSS和JavaScript实现登录和注册页面的详细说明: 1. HTML结构: - 使用语义化的HTML标签构建页面框架,如`&lt;header&gt;`、`&lt;main&gt;`、`&lt;footer&gt;`等。 - 为登录和注册表单创建`&lt;form&gt;`元素,并设置适当的`...

    CSS与JS属性对照表.

    CSS与JS属性对照表,CSS 属性对照表是 js 初学者必备的基础知识.CSS与JS紧密配合,为我们的页面增添了很多别致的效果,为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性CSS与JS紧密配合

    js 点击a标签 获取a的自定义属性方法

    在jquery的click方法中将this的ownattr属性赋值给完整内容的div标签 然而这却一直行不通 一阵研究后发现,原来项目框架是用jquery ajax获取后台列表信息的,页面在执行到click方法时,ajax还没完成 随后决定采用基本...

    javascript通过获取html标签属性class实现多选项卡的方法

    主要介绍了javascript通过获取html标签属性class实现多选项卡的方法,涉及javascript针对页面元素属性与事件的相关操作技巧,需要的朋友可以参考下

    JavaScript获得页面base标签中url的方法

    主要介绍了JavaScript获得页面base标签中url的方法,涉及javascript中元素的获取及href属性的使用技巧,需要的朋友可以参考下

    Iframe页面请求跳转问题解决

    首先在父页面的javascript给定义一个window.name,并赋予一个字符串值,如window.name="test",其中赋予的字符串值可以随意定义,然后在Iframe页面的Form 标签中定义target属性,并且其值也必须与之前定义的window....

    通过js动态创建标签,并设置属性方法

    这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个div的事例; [removed] function fun(){ var frameDiv = document.createElement("div");//创建一个标签 var bodyFa = document....

    JS如何实现在页面上快速定位(锚点跳转问题)

    本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下: ...&lt;a&gt; 标签为了能够和以前的版本相兼容而保留了 name 属性,同时也可以使用 id 属性。这些属性可以相互交换使用,可以

    js控制CSS样式属性语法对照表

    为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。 例如常用的关闭某个漂浮的广告显示:document.getElementById(‘ad’).style.display=’none’;相当于:.ad{ display:none}. 下面就是...

    Web前端高级作业一.txt

    每一个属性由属性加冒号加属性组成,样式之间用分号隔开 2.有各种选择器 2.1基本选择器 标签选择器,通过标签加大括号来选择 类名选择器,通过点加类名来选择 id选择器,通过#加id名来选择 2.2组合选择器 ...

Global site tag (gtag.js) - Google Analytics