jQuery简单操作HTML的DOM

#转载请留言联系

如果需要了解什么是HTML的dom，可以参考：http://www.w3school.com.cn/htmldom/index.asp

 下面的是jQuery操作DOM，并不是JavaScript。

  • 创建新标签

var new_content = $('<h1>我是标题</h1>');  //$函数中如果参数不是一个选择器语法，则会被认为是一个新增的元素

  • 在现存元素的内部，从后面放入元素

1.append

示例（在标题1下面添加标题2）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var new_content=$('<h1>我是标题2</h1>');
            $('body').append(new_content)  //注意这里
        })
    </script>
</head>
<body>
    <h1>我是标题1</h1>
</body>
</html>

2.appendTo

示例（在标题1下面添加标题2）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var new_content=$('<h1>我是标题2</h1>');
            new_content.appendTo($('body'))  //注意这里
        })
    </script>
</head>
<body>
    <h1>我是标题1</h1>
</body>
</html>

需要注意的是：append与appendTo方法的使用，位置是不同的！

  • 在现存元素的内部，从前面放入元素

prepend()与prependTo()，用法和append()与appendTo()一样。只是一个在前面放入，一个在后面放入。

  • 在现存元素的外部，从后面放入元素

1.after

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var new_content=$('<h1>我是标题2</h1>')
            $('h1').after(new_content)
        })
    </script>
</head>
<body>
    <h1>我是标题1</h1>
</body>
</html>

2.insertAfter

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var new_content=$('<h1>我是标题2</h1>')
            new_content.insertAfter($('h1'))
        })
    </script>
</head>
<body>
    <h1>我是标题1</h1>
</body>
</html>

  • 在现存元素的外部，从前面放入元素

before()和insertBefore()

  • 删除节点

$('#list li').eq(2).remove(); // 移除下标2

  • 清空内容

$('#list').empty();

 

posted @ 2018-09-28 18:47  苦瓜爆炒牛肉  阅读(188)  评论(0)  编辑  收藏  举报