`
jinhonglin001
  • 浏览: 15156 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

javaScript动态修改添加元素及设置元素属性

阅读更多

        我们都知道网页的组成,其实就是好多标签有序有目的的组成的,那么我们如何动态的添加元素并且设置他的属性,我们可以用js来实现。

       在这之前需要了解几个概念(w3c的定义):

       节点:

        在HTML DOM(文档对象模型)中,每个部分都是节点:

                文档本身是文档节点

                所有HTML元素是元素节点

                所有HTML属性是属性节点

                HTML元素内的文本是文本节点

                注释是注释节点

       Element对象;

                在HTML中,Element对象表示HTML元素。

                Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点

                NodeList对象表示节点列表,比如HTML元素的节点集合

                元素可以拥有属性,属性是属性节点

好了,现在开始创建元素了

这是一段html代码的body部分:

<div id="div1">
</div> 

 

      如果要添加一个元素,必须先创建该元素也就是先创建一个节点,然后向某个已存在的元素添加

                创建新的元素

var  p = document.creatElement("p") 

                 将p元素添加到div中

//我们首先取到div元素
var element = document.getElementById("div1")
//添加
div.appendChild(p)

               如果想要添加一些内容到p元素里,我们同样要创建

      

var node=document.createTextNode("这是要添加的内容。")

             添加

p.appendChild(node);

 下面就是创建好的代码:

<div id="div1">
<p >这是要添加的内容</p>
</div>

 这个时候你会有疑问了,如果要添加一个是挺方便的,如果特别多了,那我们岂不是会疯掉的,嘿嘿,下面来看一个属性 innerHtml

我们只需要获取元素和上面一个步骤

var element = document.getElementById("div1")

 

然后

element.innerHTML="<p>"+"这是要添加的内容"+"<p>"

 

嘿嘿,是不是要更方便呢,再也不用去创建那么多节点了

然后你可能又会有疑问了,那么他的css样式怎么设置,嘻嘻,你猜对了,直接加上就好了

element.innerHTML="<p class=“p-style”>"+"这是要添加的内容"+"<p>"

 。。待续

  

 

 

 

分享到:
评论

相关推荐

    javascript动态生成页面元素

    在现代Web开发中,JavaScript作为前端开发的核心语言之一,其动态生成页面元素的能力是构建交互式网站的关键技术。本文将深入探讨如何利用JavaScript动态生成HTML页面元素,包括使用innerHTML属性和DOM(Document ...

    JS动态添加删除HTML元素(实例)

    5. 元素操作:包括获取元素对象、添加元素、删除元素、修改元素属性等。 技术要点: * 使用 `findObj` 函数获取元素对象,解决浏览器兼容性问题。 * 使用 `insertRow` 方法添加新行,并设置行的 ID 和内容。 * ...

    JavaScript动态添加删除表格行

    JavaScript提供了对DOM的访问和修改能力,让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**: 要动态添加一行,首先需要获取到表格的引用,通常是通过`document.getElementById`或`document....

    Javascript 动态添加表单实例

    2. 设置元素属性和值,如`setAttribute`和`value`。 3. 添加元素到DOM树,如`appendChild`。 4. 绑定事件监听器,如`addEventListener`。 5. 创建复杂的表单结构,包括嵌套的表单元素。 6. 实现表单元素的拖放功能,...

    javascript动态判断html元素并执行不同的操作.docx

    ### JavaScript 动态判断 HTML 元素并执行不同操作 #### 概述 在Web开发中,经常需要根据用户交互动态地改变网页的行为。一种常见的需求是基于触发事件的元素类型来执行不同的逻辑。例如,当用户点击按钮时,根据...

    js动态条目添加

    3. **设置元素属性**:使用`.innerHTML`、`.textContent`或直接设置属性(如`.id`、`.class`)来赋予新元素内容和样式。 4. **插入元素**:最后,使用`.appendChild`、`.insertBefore`等方法将新元素添加到目标容器...

    javaScript给元素添加多个class的简单实现.docx

    ### JavaScript给元素添加多个class的简洁实现 #### 概述 在Web开发中,通过JavaScript动态地为HTML元素添加或删除CSS类名是一项常见的需求。本文档将详细介绍如何使用JavaScript来给HTML元素添加多个class,并...

    动态添加style元素

    此外,`&lt;style&gt;`元素还可以通过`sheet`属性访问到其对应的CSSStyleSheet对象,这个对象提供了进一步操作CSS规则的方法,如添加、删除或修改规则。例如,我们可以这样添加一个CSS规则: ```javascript var sheet = ...

    javascript实现表格添加删除等操作

    - **创建新行**:要向表格添加行,首先需要创建一个新的`&lt;tr&gt;`元素,然后创建`&lt;td&gt;`元素并设置其内容。最后,将这些元素添加到表格的`&lt;tbody&gt;`标签内。 - **删除行**:通过获取行的引用(例如,通过点击事件的`...

    JavaScript改变HTML元素的样式改变CSS及元素属性

    3. 修改CSS样式和元素属性能够帮助我们实现动态的用户界面,提高用户体验。例如,可以基于用户的交互改变颜色、大小、隐藏或显示元素等。 4. 除了上述两种方法,JavaScript还提供了其他技术来改变样式和属性,比如...

    本文介绍了如何利用JavaScript动态改变下拉框的属性

    本文主要讨论了如何在ASP.NET页面中利用JavaScript脚本来动态地修改下拉框(Select元素)的属性,以此来提升用户体验和增强页面功能。 #### 描述解读 文章通过具体的案例,详细讲解了在ASP.NET环境下几种常见的...

    JavaScript DOM元素常见操作详解【添加、删除、修改等】

    添加元素通常需要先创建一个新的元素节点,然后将其插入到DOM树中的合适位置。常用的方法有: - 创建新元素:使用`document.createElement`方法。 - 插入元素:使用`appendChild`、`insertBefore`等方法。 删除...

    JavaScript实现动态添加、移除元素或属性的方法分析

    本文将详细介绍如何使用JavaScript来动态地在页面上添加或移除元素和属性。重点讲解了几个重要的DOM操作方法,以及它们在实际开发中的应用示例。以下内容基于给定的文件信息,将深入解析这些知识点。 首先,要动态...

    向元素中动态添加option

    这篇博客“向元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下,实现在用户界面中动态地向`&lt;select&gt;`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言,它可以操作HTML元素,包括添加、...

    动态添加行动态添加行

    在IT领域,尤其是在Web开发中,"动态添加行"是一个常见的需求,特别是在处理表格、列表或其他数据展示元素时。这个过程通常涉及到JavaScript(JS),因为HTML是静态的,无法直接响应用户交互。以下是对这个主题的...

    JavaScript动态改变HTML页面元素例如添加或删除

    首先,我们来看如何通过JavaScript向HTML页面中添加元素。在给定的示例中,`add`函数演示了这个过程。它首先使用`document.createElement()`方法创建一个新的`&lt;p&gt;`(段落)元素。接着,`document.createTextNode()`...

    给before和after伪元素设置js效果的方法.docx

    例如,我们可以使用JavaScript将content内容添加到需要设置js效果的元素上,然后使用CSS来定义样式.change:before{content: attr(data-beforeData);color: red;}。 方法四:添加样式表 添加样式表是一种常见的方法...

    《JavaScript动态网页设计经典实例教程》

    学习如何选择、添加、删除和修改DOM元素是JavaScript动态网页设计的关键。熟悉DOM节点的概念,如元素节点、属性节点和文本节点,以及使用方法如getElementById、getElementsByTagName等,能帮助开发者实现对网页内容...

    JavaScript动态修改网页元素内容的方法

    在描述的内容中,提到了一种通过JavaScript修改HTML元素内容的方法。具体地,这里使用了`document.getElementById`方法来获取页面元素。该方法接受一个参数,即目标元素的ID,然后返回一个对应的DOM元素对象。一旦...

Global site tag (gtag.js) - Google Analytics