操作DOM(一):创建节点、插入节点

创建节点

创建元素
原生:使用createElement()方法创建新元素,并返回新建元素的引用。该方法只有一个参数,用来指定创建元素的标签名称。如果要把创建的元素添加到文档中,还需要调用appendChild方法来实现
例:

var el=document.createElement('p');
document.body.appendChild(el);

jQuery:直接使用$(html)
根据参数html对所传递的HTML字符串,创建一个DOM对象,并将该对象包装为jquery对象返回
例:

$('body').append($('<div></div>'))
createElement方法只传递标签名即可,但是$()必须是完整的标签字符串

创建文本
原生:使用createTextNode()方法创建文本节点

document.createTextNode(data)
data表示字符串,参数中不能够包含HTML标签,否则JavaScript会把标签作为字符串进行显示

例:

var el = document.createElement('div');
var txt = document.createTextNode('123');
el.appendChild(txt);
document.body.appendChild(el);var el = document.createElement('div');
el.innerText = '123';
document.body.appendChild(el);

jQuery:直接把文本字符串添加到元素标记字符串中即可

$('body').append($('<div>1231</div>'))

创建属性
原生:setAttribute(name,value)
name表示属性名,value表示属性值。两者必须是以字符串的形式进行传递。如果元素中存在指定的属性,它的值将被刷新;如果不存在,则为元素创建属性并赋值
例:为div设置一个title属性

var el = document.createElement('div');
var txt = document.createTextNode('123');
el.appendChild(txt);
el.setAttribute('title', '盒子')
document.body.appendChild(el);

jQuery:创建属性节点与创建文本节点相似

$('body').append($('<div title="盒子">132123</div>'))

插入节点

内部插入
原生:
1、appendChild()
2、insertBefore()

insertBefore(newchild,refchild)

insertBefore()可以在指定节点前插入元素。newchild表示要插入的新节点,refchild表示在此节点前插入新节点,返回新的子节点
例:在div元素的第一个子元素前插入一个h1元素

var div=document.getElementsByTagName('div')[0];
var h1=document.createElement('h1');
div.insertBefore(h1,div.firstChild);

jQuery:
1、append()

append(content)append(function(index,html))
用来插在每个匹配元素里面的末尾。参数content可以是一个元素、HTML字符串或者jQuery对象;参数function(index,html)是一个返回HTML字符串的函数,该字符串将会被插入到匹配元素的末尾

2、appendTo(target)
将元素插入到由参数target指定的目标末尾。参数target可以是一个选择符、元素、HTML字符串或者jQuery对象
3、prepend()

prepend(content)prepend(function(index,html))
把参数指定的内容插入到节点中,并返回jQuery对象。指定的内容插入到每个匹配元素里面,作为它的第一个子元素

外部插入
1、after()

after(content)after(function(index))
after()方法根据设置参数在每一个匹配的元素之后插入内容
参数content是一个元素、HTML字符串或jQuery对象;function(index)表示一个返回HTML字符串的函数

例:使用after方法为每一个列表项后面插入一行字符串,该字符串是从列表结构中获取图片中的name属性

<ul>
	<li><img src="img/01.jpg" name="汽车"></li>
</ul>
<script type="text/javascript">
	$(function() {
		$('ul li img').after($('li img').attr('name'))
	})
</script>

2、insertAfter(target)
匹配的元素将会被插入到参数target指定的目标后面
例:

$(function() {
	$('<span>注释文本</span>').insertAfter($('ul li img'))
})

3、before()

before(content)before(function(index))
在每个被匹配的元素之前插入内容

4、insertBefore(target)
匹配的元素将会被插入在由参数target指定的目标前面

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无知的小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值