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元素的更多相关文章

  1. react基础语法(一)元素渲染和基础语法规则

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. react学习(二)--元素渲染

    元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...

  3. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  4. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

  5. js创建元素

    js创建多条数据,插入到页面中的方法. 方法一: 执行时间大概在35ms左右. 这个就属于使用字符串拼接之后,再一次性的插入到页面中.缺点是,容易导致事件难以绑定. 方法二: 执行时间不定,最少的在8 ...

  6. Vuejs - 花式渲染目标元素

    Vue.js是什么 摘自官方文档: Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  7. JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  8. .NET前后台-JS获取/设置iframe内对象元素并进行数据处理

    转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...

  9. react 也就这么回事 04 —— 元素渲染

    为了便于后续理解,我们再来回顾和总结前面几个章节的内容 1 元素及其创建 元素是构成 React 应用的最小砖块. 元素描述了你在屏幕上想看到的内容. const element = <h1&g ...

随机推荐

  1. java 中打印调用栈

    source-code: public class A { public A() {} private static void printStackTrace() {         StackTra ...

  2. JQuery 获取指定url对应的html内容

    用jquery的ajax类似的请求就可以了:比如: $.get("test.php", function(data){ alert("Data Loaded: " ...

  3. SQL中的delete和TRUNCATE的用法

    TRUNCATE TABLE 表名 删除表中的所有行,而不记录单个行删除操作. 语法 TRUNCATE TABLE name 参数 name 是要截断的表的名称或要删除其全部行的表的名称. 注释 TR ...

  4. 算法_Longest Palindromic Substring(寻找最长回文字串)

    题目:Given a string S, find the longest palindromic substring in S. You may assume that the maximum le ...

  5. 记录一下C#+Oracle批量插入的一个方法

    public bool insertOracle(DataTable dataTable, string sql) // Oracle sql 查询的是表头 { string ConnStr = Wi ...

  6. 轻量级jquery框架之--树(tree)

    前言 在常用的UI组件中,树形组件与数据列表组件可以说是构成一个管理平台基本的两大数据核心组件.树形组件用于系统菜单,数据列表用于数据表现,两者配合即可完成一个简单的数据系统.要实现一个支持复选.工具 ...

  7. C# ?? 运算符,不能忘记的知识点

    最近项目中有一个bug被测试(是黑盒测试)发现了,跟了老半天代码,才找到这个问题的所在,原来是一个计算表达式中用到了??运算符,才导致了这个错误,下面让我简单讲述一下. C# ?? 运算符 msdn上 ...

  8. 在服务器上php执行某些远程函数出错

    Warning: imagecreatefromjpeg(): php_network_getaddresses: getaddrinfo failed: Name or service not kn ...

  9. sqlsever连接两个不同服务器上的数据库进行查询

    exec sp_addlinkedserver 'LocalSERVER' ,--别名,自己起一个 '' , 'SQLOLEDB' , 'ip' --远程服务器地址 exec sp_addlinked ...

  10. C语言做一个通讯录程序(在console里面运行)

    最近复习C语言的时候看到网上有个C语言通讯录的小项目,于是看了下那个程序实现的大概的功能,然后自己也跟着做了个.代码还算简洁,贴上来给有需要的人. // // main.m // AdressBook ...