js 创建html元素 渲染html元素
var p1 = document.getElementById('p1');
//添加的元素类型及属性
var newNode = document.createElement("input");
newNode.setAttribute('name','text');
newNode.setAttribute('type','text');
newNode.setAttribute('value','text');
//添加在p1里面
p1.insertBefore(newNode,p1.childNodes[0]);
);
//添加在p1元素外面
p1.parentNode.insert(newNode);
或者
var newNode = document.createElement('');//不知道语法是否正确,反正有效果
newNode.innerHTML = "<a href='xxx'>xxxx</a>";
p1.insertBefore(newNode);
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)
newchild:插入新的节点
refchild:在次节点之前插入新的节点
js 创建html元素 渲染html元素的更多相关文章
- react基础语法(一)元素渲染和基础语法规则
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- react学习(二)--元素渲染
元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- js和jQuery创建元素和把元素插入到文档中所用的方法
js创建元素: document.createElement(" 创建的元素"); //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...
- js创建元素
js创建多条数据,插入到页面中的方法. 方法一: 执行时间大概在35ms左右. 这个就属于使用字符串拼接之后,再一次性的插入到页面中.缺点是,容易导致事件难以绑定. 方法二: 执行时间不定,最少的在8 ...
- Vuejs - 花式渲染目标元素
Vue.js是什么 摘自官方文档: Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...
- JS添加或删除HTML dom元素的方法实例分析
本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- .NET前后台-JS获取/设置iframe内对象元素并进行数据处理
转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...
- react 也就这么回事 04 —— 元素渲染
为了便于后续理解,我们再来回顾和总结前面几个章节的内容 1 元素及其创建 元素是构成 React 应用的最小砖块. 元素描述了你在屏幕上想看到的内容. const element = <h1&g ...
随机推荐
- java第二周学习日记
day01 1.抽象类 (1)抽象类的应用场景: 我们在描述一类事物的时候,发现该种事物确实存在着某种行为,但是这种行为目前不是具体的,那么我们可以抽取这种行为的声明,但是不去实现该种行为,这时候这种 ...
- Python进阶之路---1.1python简介
Python简介 Python简介 Python (发音:[ 'paiθ(ə)n; (US) 'paiθɔn ]n.蟒蛇,巨蛇 ),是一种面向对象的解释 ...
- Linux下Ant的安装
OS:CentOS6.3 ant版本:apache-ant-1.9.2-bin 第1步:下载ant apache-ant-1.9.2-bin.tar.gz 第2步:解压 tar -zxvf apach ...
- 你所不了解的css选择器补充
div p和div>p的区别 1.div p选择 <div> 元素内部的所有 <p> 元素 2.div>p选择父元素为 <div> 元素的所有 < ...
- C# 4.0 并行计算部分
C# 4.0 并行计算部分 c#linq算法多线程list微软 目录(?)[-] C 40 并行计算部分 一简单使用 二 并行循环的中断和跳出 三并行循环中为数组集合添加项 四返回集合运算结果 ...
- 0104.1——视图控制器UIViewController
一.生命周期 当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc 创建对象,分配空间2.init (initWit ...
- git configuration
git的配置文件由section名和变量名组成: [user] name = abc emial = example.com []里面的user就是section名,section只能由字母,数字,- ...
- jQuery中$.proxy()的原理和使用
jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境. jQuery.proxy( function, context ) fu ...
- 通过Alexa API获取Alexa排名
我们通会用Alexa的网站(或其它站长工具网站)来栓查我们的网站流量排名,这样就必须去那些网站.实际上,可以通过Alexa XML API 获取网站的Alexa相关的数据(XML格式的),再使用XM ...
- CircleImageView自定义圆形控件的使用
1.自定义圆形控件github地址: https://github.com/hdodenhof/CircleImageView 主要的类: package de.hdodenhof.circleima ...