`
starbhhc
  • 浏览: 649582 次
  • 性别: 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>
分享到:
评论

相关推荐

    CSS和JavaScript标签style属性对照表

    下面我们将详细讨论这些标签和属性的对照,并提供一些基本的使用方法。 **盒子模型属性:** CSS中的盒子模型包括边框(border)、清除(clear)、浮动(float)、外边距(margin)和内边距(padding)。这些属性在...

    HTML常用标签和属性PPT

    HTML(HyperText Markup Language)是构建网页的基础语言,它通过一系列的...通过这份PPT,你可以深入学习HTML的基本结构、标签使用和属性配置,从而更好地理解和创建网页。对于新手来说,这是一个非常实用的学习资源。

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

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

    超级详细的ecside标签部分属性说明

    超级详细的ecside标签部分属性说明 ecside标签是ECTable的一个组件,用于生成列表。下面是ecside标签部分属性的详细说明: ...这些属性可以帮助我们更好地控制ecside标签的行为和显示,提高列表的可读性和交互性。

    根据标签名字和标签的class属性得到对象

    ### 根据标签名字和标签的class属性得到对象 在Web开发中,经常需要通过JavaScript来操作DOM(Document Object Model)元素。一个常见的需求就是根据指定的标签名和类名来获取页面中的DOM元素。本篇文章将详细介绍...

    js中使用标签

    ### JavaScript中使用标签 在JavaScript开发中,有时候我们...通过结合使用JSP中的标签和JavaScript的DOM操作,我们可以轻松实现动态生成和更新页面内容的功能。这对于构建现代Web应用程序来说是非常有用的技巧之一。

    a标签调用js的方法总结

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

    页面加载中js 页面加载中js 页面加载中js

    因此,将脚本放在`&lt;body&gt;`标签底部或使用`async`或`defer`属性可以提高页面加载速度。 2. **异步加载(async)**:通过设置`async`属性,JavaScript脚本将不会阻塞页面的其余部分加载,而是与HTML并行下载和执行。...

    标签(Tabs)实现多页面切换

    总之,“标签(Tabs)实现多页面切换”是Web开发中的一个重要技能,它结合了Ajax和JavaScript的力量,提供了流畅的用户体验。理解这一技术可以帮助开发者创建更高效、更用户友好的网页应用。通过不断实践和优化,我们...

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

    JS实现页面快速定位的技术主要涉及锚点跳转的概念和应用。锚点,也被称作片段标识符,其作用是允许用户点击链接后页面能够跳转到特定的位置。在网页设计中,尤其是在内容较多、页面较长的情况下,合理使用锚点可以...

    获取标签离页面边框距离js

    根据给定的信息,本文将详细解释如何通过JavaScript代码获取页面中特定元素(通常称为标签)相对于页面边框的距离。此技术对于实现动态布局、响应式设计等非常有用。 ### 获取标签离页面边框距离的原理 在Web开发...

    html5事件和标签属性

    HTML5是Web开发的标准之一,它引入了许多新的特性和改进,包括增强的事件处理和标签属性。事件属性在HTML5中扮演着重要角色,因为它们允许开发者通过JavaScript响应用户交互和页面状态变化,从而实现更丰富的用户...

    CSS和JS标签style属性对照表(方便js开发的朋友).docx

    本文将详细解析CSS和JavaScript中的style属性对照表,这对于JS开发者理解和操作DOM元素的样式非常有帮助。 1. **边框属性(Border Properties)** - CSS 中,设置边框的属性如 `border`, `border-bottom`, `border...

    原生js热门标签云球形仿flash动态效果演示页面

    "原生js热门标签云球形仿flash动态效果演示页面"是一个典型的实例,它展示了如何使用JavaScript(特别是原生JS,非jQuery等库)来创建类似Flash的动态效果,但又避免了Flash在现代Web环境中的兼容性和性能问题。...

    原生js标签云.zip

    使用CSS3的`transition`属性,配合JavaScript修改标签的`font-size`和`transform`属性,实现平滑缩放和位移。 6. **事件监听**:为了交互性,可以添加鼠标悬停事件监听器,当鼠标悬停在标签上时,可以放大该标签,...

    【原创】获取元素标签上的所有属性值插件

    通过引入并使用`jquery.attr.js`,开发者可以方便地获取和操作元素的属性,从而提高前端开发的效率和代码的可维护性。在实际项目中,这样的插件可以帮助我们快速处理与元素属性相关的各种任务,使得前端开发更加便捷...

    JS 写的标签云

    总结来说,"JS写的标签云"是一个使用JavaScript实现的动态标签展示技术,通过3D视觉效果增强了用户体验。开发者可以通过学习这个项目的源码,掌握动态DOM操作、3D动画效果以及事件处理等技能。如果你对前端开发有...

    【第七章】JavaScript【Script标签与访问HTML页面(1)】

    【第七章】JavaScript【Script标签与访问HTML页面(1)】是关于JavaScript编程的一个章节,主要探讨了如何在HTML文档中使用Script标签以及JavaScript如何与HTML页面进行交互。这一主题对于理解和开发动态网页至关重要...

    js消息提示,输出HTMl标签追加到页面

    在JavaScript编程中,"js消息提示,输出HTML标签追加到页面"是一个常见的需求,它涉及到用户界面交互和DOM操作。下面将详细讲解这个主题。 首先,JavaScript是一种强大的客户端脚本语言,常用于网页动态效果的实现...

    js获取页面控件坐标.pdf

    获取页面控件坐标是 JavaScript 编程中非常重要的一部分,我们可以使用多种方法来获取元素的坐标,包括使用 offsetLeft 和 offsetTop 属性、getBoundingClientRect() 方法和 JavaScript 库等。 此外,在 HTML 文...

Global site tag (gtag.js) - Google Analytics