创建HTML元素的方法
第一种：使用 parent.appendchild()方法
HTML页面
<div id="div1"></div>
JS文件
//第一步创建标签元素节点
var elem=document.createElement("p");
//第二步创建文本节点
var content=document.createTextNode("Hello,BigSpinach!");
//第三步将文本添加到所创建的标签中
elem.appendChild(content);
//第四步，将创建的元素添加到页面中
document.getElementById("div1").appendChild(elem);
显示结果
第二种：使用innerHTML="html代码段"
HTML页面
<div id="div2"></div>
JS文件
document.getElementById("div2").innerHTML="<p>hello div2！</p>";
显示结果
第三种：使用document.write("html代码段")的方法
HTML页面
<body></body>
JS文件
document.write（"<p>hello div3！</p>"）;
显示结果
页面会打印出 hello div3！
第四种：使用jQuery创建HTML元素
HTML页面
<div id="div4"></div>
JS文件
//第一步：创建页面元素
var $p=$("<p></p>");
//第二步：设置属性和值
$p.attr("name","250");
//第三步：设置文本
$p.text("hellow div4！");
//第四步： 将创建的元素添加到指定位置
$("#div4").append($p);
显示结果
创建HTML元素的方法的更多相关文章
- js创建svg元素的方法
需要JQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 原生JS和jQuery创建元素的方法
jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...
- jquery 动态创建的元素，绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- 动态创建html元素的几种方法
可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 □ 使用jQuery动态创建元素追加到jQ ...
- jqueyr获取动态创建的元素
javascript代码是按照代码顺序执行的,所以如果你用某个元素的click事件创建一个元素,id为test,然后在下面$("#test")是无法选择到的. 正确的方法是将在cl ...
- jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
- js动态创建的元素绑定事件
新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("can ...
- 创建删除元素appendChild,removeChild,createElement,insertBefore
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
随机推荐
- [UE4]让AI跑起来
让AI由静止状态变成跑步状态,做法跟玩家角色走路一样. 一.创建1D混合动画 二.在AI角色关联的动画蓝图中使用第一步创建的混合动画
- JNDI的学习与使用
JNDI(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API.命名服务将名称和对象联系起来,使得我们可以用 ...
- 在docker中运行jenkins实现代码自动发布到测试服务器
在docker中运行jenkins 用的镜像是apline版:lts-alpine,并设置正确的时区. docker run --name jenkins_master -d \ -p 8081:80 ...
- mac mysql中文乱码问题
God,今天看了好多资料,除了让我命令更熟练以外浪费了好多时间. 遇到的问题:写入数据库有中文的时候,显示??? 最后解决办法: 1.打开终端,输入: mysql -u root -p,然后输入mys ...
- python拓展3 常用算法
知识内容: 1.递归复习 2.算法基础概念 3.查找与排序 参考资料: http://python3-cookbook.readthedocs.io/zh_CN/latest/index.html h ...
- C常用问题
linux系统,gcc编译器包含引用的头文件位置
- 0_Simple__template
简单的 CUDA 应用模板,白送的 Sample. ▶ 源代码 //template_cpu.cpp extern "C" void computeGold(float *, co ...
- leetcode350
public class Solution { public int[] Intersect(int[] nums1, int[] nums2) { var len1 = nums1.Length; ...
- leetcode217
public class Solution { public bool ContainsDuplicate(int[] nums) { var list = nums.Distinct(); if ( ...
- PHP 实现-多线程编程
前些天帮同事查一个问题,第一次接触到了 PHP 的多线程,原以为 PHP 普遍都是单线程模型,并不适合多线程领域,花些时间翻了几个多线程的项目源码之后,发现 PHP 的多线程也颇有可取之处,活用起来, ...