js动态创建元素和删除

动态创建元素的三种方式；

一、document.write()；

功能：向body的最后添加一段结构；

参数：字符串；

用法：document.write('这是内容<div>这是div</div>')；

问题：

1、如果页面加载后使用会导致页面所有内容被覆盖；

2、无法进行指定位置添加元素；

二、box.innerHTML = '要添加的元素';

优点

1、可以指定位置添加元素；

2、创建复杂结构非常方便；换行的话需要进行基本的字符串处理使用转译符；

box.innerHTML = '<div><p class="text colorRed"></p></div>\

<div><p class="text fl"></p><span><a href="#">这是a标签</a></span></div>\

<div><p class="text fl"></p><h4>这是h4</h4></div>\

<div><p class="text fl"></p><span><a href="#">这是a标签</a><h4>这是h4</h4></span></div>\

<div><p class="text colorRed"><span><a href="#">这是a标签</a></span></p></div>';

缺点；

1、会对原有的元素内部结构进行覆盖；解决方法是使用 += 可以貌似解决覆盖问题，但只是长得像并不是原来的内部元素；如果被覆盖的事件有事件，那么事件将不复存在；

三、createElement创建元素（常用）

用法： createElement('<div></div>');

要结合appendChild() 或 insertBefore();使用

功能：用于创建指定标签

参数：字符串形式的标签名；

特点：使用此方法创建的元素默认不在页面上显示，需要结合元素的移动功能才可以显示；

总结：当要创建的结构比较复杂时，用：innerHTML;

除了结构复杂的情况外都可以使用document.createElement();

四、删除节点

父节点.removeChild(text);

转载于:https://www.cnblogs.com/qiweile/p/9290887.html

js动态创建元素和删除相关推荐

JS 动态创建元素、删除元素、替换元素、修改元素
动态创建元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
JS动态创建元素（两种方法）
前言创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
js动态创建div等元素实例
为了节省时间,就直接贴代码了!希望大家多多的关注我! <html><head><title>js动态创建div等元素实例</title><styl ...
Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Java程序员从笨鸟到菜鸟之（八十七）跟我学jquery（三）jquery动态创建元素和常用函数示例
在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些 ...
jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考. 当HTML字符串是没有属性的元素是, 内部使用document.cre ...
html div 移除,js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementById ...

js动态创建元素和删除

js动态创建元素和删除相关推荐

最新文章

热门文章